(Nuxt) Vue 组件直到页面刷新才显示

Question

我将导航项存储在我的 Vuex 存储中，并以 Vue/Bulma 组件的形式对它们进行迭代以进行条件输出，如下所示：

<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>

如图所示，只有当组件的 privatePage 数据项解析为 true 时才应输出，它确实如此：

export default {
  data: ctx => ({
    privatePage: ctx.$store.state.privateRoutes.includes(ctx.$route.name)
  })
}

我遇到的问题是当我运行开发服务器（使用ssr: false）时，当我通过NuxtLink 标签导航到页面时，组件最初并没有显示。如果我手动导航到页面或刷新它，组件就会显示。

我以前在 Nuxt 看到过这种情况，但不确定是什么原因造成的。有人知道吗？

Answer 1

推荐：

1. 使用mapState 和其他 vuex 映射助手以获得更易读的代码:)。

2. 不要在同一个元素上使用 v-for 和 v-if

3. 将"nuxt-link" 用作您的tag

4. 将/ 用于to（如果您的地址没有尾部斜杠）

<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>

在你的脚本中：

<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>

最后，如果它不能帮助你，我建议通过dev tools 检查你的页面，看看 html 中呈现的组件是什么。它应该是带有href 属性的<a> 标签。另外，我认为您可以将链接地址（适用于刷新而不是通过 nuxt 链接）添加到您的问题中，因为在 navbar-item 中创建的 href 可能不正确。

注意：token 是导航数组的索引。所以你的网址是例如yourSite.com/1.so 这就是你想要的吗？