@shsv382

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

На сайте есть раздел "галерея", когда в нее загружено слишком много фотографий, становится невиден 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
  • Вопрос задан
  • 61 просмотр
Решения вопроса 1
Fragster
@Fragster
помогло? отметь решением!
сделайте computed свойство, что-то типа
const route = useRoute()
const isGallery = computed(() => route.name === 'gallery') или route.matched.some(({name}) => name === 'gallery') в зависимости от наличия или отсутствия вложенных маршрутов

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы