На сайте есть раздел "галерея", когда в нее загружено слишком много фотографий, становится невиден 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