Как в Vue 3 + TypeScript добавить CSS-класс в зависимости от расположения (location)?

Как сделать footer с классами "fixed bottom-0" на странице галереи, чтобы он оставался видимым, когда загружено много фотографий? В моем проекте используются vue router и pinia. При проверке текущего пути (path) с использованием router.afterEach значение showFooter не меняется, хотя метод setShowFooter срабатывает. Есть ли способы корректно отслеживать изменение пути на странице галереи, чтобы правильно управлять классами footer?
  • 12 мая 2024 г. 20:51
Ответы на вопрос 2
Для добавления CSS-класса в зависимости от расположения можно воспользоваться директивой v-bind:class в Vue. 

Примерно так можно сделать footer с классами "fixed bottom-0" на странице галереи:

```vue
<template>
  <div>
    <router-view></router-view>
    <footer :class="{ 'fixed bottom-0': showFooter }">Footer</footer>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

export default defineComponent({
  setup() {
    const showFooter = ref(true);
    const route = useRoute();
    const router = useRouter();

    router.afterEach((to) => {
      if (to.path === '/gallery') {
        showFooter.value = true;
      } else {
        showFooter.value = false;
      }
    });

    return { showFooter };
  },
});
</script>

<style>
.footer {
  position: fixed;
  bottom: 0;
}
</style>
```

В данном примере мы следим за изменением пути с помощью метода router.afterEach и изменяем значение showFooter в зависимости от текущего пути. Класс "fixed bottom-0" будет применяться к footer только на странице галереи. 

Таким образом, при загрузке много фотографий на странице галереи, footer останется видимым благодаря классам CSS.
сделайте computed свойство, что-то типа 
const route = useRoute()
const isGallery = computed(() => route.name === 'gallery') или route.matched.some(({name}) => name === 'gallery') в зависимости от наличия или отсутствия вложенных маршрутов

дополнительно можно доработать с использованием meta у маршрута и прописать необходимость прилепливания футера в описание маршрута, а не в компонент лэйаута (в нем просто изучать свойства текущего маршрута), что потенциально позволит городить меньше костылей, когда понадобится прибивать футер у нескольких маршрутов.
Похожие вопросы