Nuxt 布局更新每条路由上的数据

Question

我是Nuxt/Vue的新手，对数据在不同页面之间的工作方式感到困惑。我想显示浅色或深色徽标，具体取决于我是否在索引页上。在页面之间导航时，数据不会更新路由名称，因此徽标不会更改：下面的布局页面。

<template>
  <main>
    <img v-if="page != 'index'" src="~/assets/img/logo-white.svg">
    <img v-else src="~/assets/img/logo-dark.svg">
    <nuxt />
  </main>
</template>
<script>
  export default {
    data () {
      return {
         page: this.$route.name
      }
    }
  }
</script>

任何帮助都会很棒。谢谢Jamie

Answer 1

在 nuxt 布局中，每个页面都代替 <nuxt /> 标记呈现。

您正在布局中设置 reactive 属性page，该布局在开始时仅挂载一次，所有其他页面稍后都会在其中呈现。因此，当页面发生更改时，布局不会重新挂载，page的值保持不变。

您可以在路由上添加观察程序，如下所示：

<script>
  export default {
    data () {
      return {
        page: this.$route.name
      }
    }
    watch: {
     '$route': function (value) {
       this.page = value.name
      }
    }
  }
</script>  

因此，现在每次路由更改时，page都会使用路由的新名称进行更新。

Answer 2

使用computed property而不是data，$route是反应性的，将触发计算更新。

computed: {
  page() {
    return this.$route.name
  }  
}

您也可以只访问模板中的$route。

<img v-if="$route.name != 'index'" src="~/assets/img/logo-white.svg">