Estoy construyendo un SPA con Vue 3 y ahora tengo el caso de que me gustaría mostrar una insignia en la barra de navegación de ciertas páginas. Mi estructura:
// App.vue
<template>
<NavBar />
<RouterView />
</template>
Mis caminos:
También uso una solución de tienda simple. Aquí tengo una función
export const store = reactive({
isCounterPage: false,
checkIsCounterPage() {
this.isCounterPage = window.location.pathname.includes("/counter/");
}
}
En el archivo router/index.js, llamo al método checkIsCounterPage() .
// router/index.js
router.beforeEach(async (to, from, next) => {
store.checkIsCounterPage()
}
Y en mi barra de navegación, uso una condición en la que verifico la variable:
// someView.vue
<template>
<div v-if="store.isCounterPage" class="badge">BADGE</div>
</template>
Desafortunadamente, no funciona como yo quiero. Solo después de una actualización completa de la página (por ejemplo, F5 / actualizar página) , reconoce dónde está. Entonces, el problema es que el método de almacenamiento solo se llama una vez en la inicialización y no en el cambio de ruta como supongo.
Pregunta:
¿Qué estoy haciendo mal? ¿Es esta la forma correcta?
Puede agregar un metacampo a sus rutas de contador:
routes: [
{ path: '/counter/x', component: x, meta: { isCounterPage: true } },
...
],
y verifique meta:
router.beforeEach(async (to, from, next) => {
if (to.meta.isCounterPage) store.checkIsCounterPage(true)
next()
}
y en tienda:
export const store = reactive({
isCounterPage: false,
checkIsCounterPage(val = false) {
this.isCounterPage = val
}
}