Estoy almacenando elementos de navegación en mi tienda Vuex e iterándolos para una salida condicional, en forma de un componente Vue/Bulma, de la siguiente manera:
<b-navbar-item v-for='(obj, token) in $store.state.nav' v-if='privatePage' class=nav-link tag=NuxtLink :to=token :key=token > {{obj.text}} </b-navbar-item> Como se muestra, debe privatePage solo si el elemento de datos de la página privada del componente se resuelve como verdadero, lo cual sucede:
export default { data: ctx => ({ privatePage: ctx.$store.state.privateRoutes.includes(ctx.$route.name) }) } El problema que tengo es cuando ejecuto el servidor de desarrollo (con ssr: false ), el componente no aparece inicialmente cuando navego a la página a través de una etiqueta NuxtLink . Si navego a la página manualmente o la actualizo, se muestra el componente.
He visto esto antes en Nuxt y no estoy seguro de qué lo causa. ¿Alguien sabe?
recomendación :
use mapState y otro asistente de mapeo vuex para tener un código más legible :).
no use v-for y v-if en el mismo elemento
use "nuxt-link" para su tag
use / for to (si sus direcciones no tienen una barra inclinada final)
<template v-if='privatePage'> <b-navbar-item v-for='(obj, token) in nav' class=nav-link tag="nuxt-link" :to="token" Or "`/${token}`" :key="token" > {{obj.text}} </b-navbar-item> </template>y en tu guion:
<script> import {mapState} from 'vuex' export default{ data(){ return { privatePage: false } }, computed:{ ...mapState(['privateRoutes','nav']) }, mounted(){ // it's better to use name as a query or params to the $route this.privatePage = this.privateRoutes.includes(this.$route.name) } } </script> y, finalmente, si no pudo ayudarlo, le sugiero que inspeccione su página a través de dev tools de desarrollo y vea cuál es el componente representado en html. debe ser una etiqueta <a> con la propiedad href . Además, creo que puede agregar la dirección del enlace (que funciona con la actualización y no con el enlace nuxt) a su pregunta, porque tal vez el href creado no sea cierto en el elemento de la barra de navegación.
NOTA: el token es el índice de la matriz de navegación. Entonces, su URL será, por ejemplo yourSite.com/1 Entonces, ¿es lo que quiere?