通常，我使用VueCLI3来为ActionBar（例如Vuetify）设置具有vue-router meta属性（静态的静态标题，因为它们是在router.js文件中设置的）的动态标题
例：
// router.js
const routes = [
{
path: '/',
name: 'Home',
component: Home,
meta : {
title : 'Welcome Home',
}
},
]
// in App.vue
<template>
<v-app>
<ActionBar :title="$route.meta.title"></ActionBar>
<router-view></router-view>
</v-app>
</template>
使用Nuxt.JS时，无论如何我都找不到要设置的内容route-meta，因此我在商店中使用并设置了标题，并在主布局中获取。Vuex.store gettermutations
例：
// in mainLayout.vue
<template>
<v-app dark>
<v-app-bar app color="primary" dark>
<v-toolbar-title v-text="actionTitle" />
</v-app-bar>
<v-main>
<v-container>
<nuxt keep-alive />
</v-container>
</v-main>
</v-app>
</template>
<script>
export default {
computed: {
...mapGetters([
'actionTitle'
])
},
}
// in some routed page, eg: index.vue
export default {
created() {
this.$store.commit('setActionTitle', 'Medical Service BD')
},
}
使用<nuxt keep-alive />或使用缓存的组件时会发生问题。此缓存不会提交这些突变，因此操作栏标题将保持最后一个标题的静态。
哪种方法适合动态标题设置？
我从reddit找到的解决方案是使用activated方法。例：
export default {
activated() {
this.$store.commit('setActionTitle', 'Medical Service BD')
},
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句