Nuxt Layout 更新每条路线的数据

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>

任何帮助都会很棒。谢谢，杰米

Answer 1

在 nuxt 布局中，每个页面都在标签的位置呈现<nuxt />。

page您正在布局中设置反应性属性，该属性在开始时仅安装一次，所有其他页面稍后都会在其中渲染。因此，当页面发生更改时，布局不会重新安装，并且 的值page保持不变。

您可以像这样在路线上添加观察者：

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

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