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的值保持不变。

您可以像这样在路线上添加watcher：

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

Answer 3

@乔治·比卡斯

Nuxt 需要代码的速记版本。所以Slumbergeist的代码应该是这样的：

export default {
    data () {
      return {
        page: this.$route.name
      }
    }
    watch: {
     $route(value) {
      this.isHome = value.name
    },
  }

Nuxt Layout更新每条路线上的数据

3 个答案: