Nuxt布局更新每条路线上的数据
Nuxt布局更新每条路线上的数据
提问于 2019-05-26 23:58:47
我是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>任何帮助都是最好的。谢谢，杰米
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-05-27 03:53:25
使用computed property而不是data，$route是反应性的，并将触发计算更新。
computed: {
page() {
return this.$route.name
}
}你也可以在你的模板中直接访问$route。
<img v-if="$route.name != 'index'" src="~/assets/img/logo-white.svg">Stack Overflow用户
发布于 2019-05-27 03:43:54
在nuxt布局中，每个页面都是在<nuxt />标记的位置呈现的。
您正在设置布局中的反应性属性page，该布局在开始时仅挂载一次，所有其他页面稍后都会在其中呈现。因此，当页面发生更改时，布局不会重新挂载，page的值保持不变。
您可以在路由上添加watcher，如下所示：
<script>
export default {
data () {
return {
page: this.$route.name
}
}
watch: {
'$route': function (value) {
this.page = value.name
}
}
}
</script> 因此，现在每次路由更改时，page都会使用路由的新名称进行更新。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56315132
复制相关文章
相似问题
腾讯云开发者
