Как добавить CSS-класс в зависимости от location во Vue 3 + TypeScript?

Question

[shsv382]

На сайте есть раздел "галерея", когда в нее загружено слишком много фотографий, становится невиден footer. Соответственно, для страницы галереи нужно, чтобы footer имел классы fixed bottom-0 (используем tailwind).
В проекте используются vue router и pinia. Проблема в том, что проверка текущего пути (path) почему-то происходит всего один раз при загрузке страницы, а дальше состояние не изменяется

<footer
    :class="[
      {
        'fixed bottom-0 z-[9950] w-[100vw] bg-white text-gray-900 dark:bg-gray-900 dark:text-white':
          fixed,
      },
      'mt-auto py-2',
    ]"
  >

Я перепробовал хуки onBeforeRouteUpdate, router.beforeEach, router.afterEach, пробовал параметр fixed передавать из pinia, пробовал через props - безрезультатно.

Самое интересное, что здесь

// компонент Layout, который рендерит Footer
router.afterEach((to, from) => {
  if (to.path.includes('gallery')) {
    setShowFooter(true)
  } else {
    setShowFooter(false)
  }
})

метод setShowFooter из pinia срабатывает в обоих случаях, а значение showFooter не меняется. Сами значение и метод в galleryStore:

// galleryStore.ts
    const showFooter = ref<boolean>(window.location.pathname.includes('gallery'))
    const setShowFooter = (newShowFooter: boolean): void => {
      showFooter.value = newShowFooter
    }

Если кто сталкивался или просто знает причину такого поведения приложения, прошу помогите! И если можно, хотя бы минимум конкретики в части применения тех или иных методов, а не просто сухие названия - я не столь силен во Vue

Comments

[Антон Антон]

А просто position:sticky; bottom: 0 не подходит?

[Антон Антон]

А вообще всё похоже на "не очень хороший код"

[shsv382]

Антон Антон, сложно поспорить - код-то не работает. Но если просто хотите поумничать, то лучше делать это на основном хабре

[shsv382]

Антон Антон, в моем случае поведение не будет отличаться от position: fixed; bottom: 0. Но если вы внимательно еще раз прочитаете вопрос, то поймете, что такой стиль должен работать только для одной страницы - gallery. В остальных случаях закреплять footer нет необходимости, он должен быть внизу прокрутки.

[Антон Антон]

такой стиль должен работать только для одной страницы - gallery

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

[shsv382]

Антон Антон, это было первое, что я попробовал

const route = useRoute()
const isGallery = computed(() => route.path.includes('gallery'))

Проблема заключается в том, что когда я обновляю страницу, находясь в галерее, то footer действительно закрепляется, но при переходе на другие страницы остается закреплен. Если же я обновляю страницу на другом маршруте, например на главной странице, то footer не закреплен, но при переходе в галерею он также остается незакрепленным.
Проще говоря, состояние закрепления footer не меняется при переходе между страницами, а мне нужно, чтобы изменялось

[shsv382]

Антон Антон, UPD: добавил этот же код в footer еще раз. Вчера получал warning что использую useRoute() вне компонента router-view, и не работало. Сегодня заработало как надо.
Спасибо за помощь, кинь в ответы, чтобы отметил решением!

Answer 1

[Антон Антон]

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

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