Question

我想将页面标题设置为每个页面的不同值。

在常规的Vue.js中，我做了以下事情：

import router from './router'
import { store } from './store/store';

router.beforeEach((to, from, next) => {
    store.mutations.setRoute(to);
    document.title = store.getters.pageTitle;
    next();
}

我如何在nuxt中获得这种效果？

也就是说，在初始页面加载和更改页面时，我希望浏览器选项卡的标题发生变化。例如，从“我的应用程序 - 关于”到“我的应用程序 - 配置文件”。

Answer 1

来自nuxt docs，在每个protected override void RaisePostBackEvent(IPostBackEventHandler sourceControl, string eventArgument) { if (sourceControl is yourControl) { //sanitize data } }组件中，您可以定义返回页面标题的head函数，即

pages

Answer 2

我找到了一种方法，但我不知道它是否是“正确的”方式。我在mounted()中使用default.vue函数作为初始页面加载，并在transition中使用nuxt.config.js属性进行每次页面更改。所以，在default.vue：

...mapGetters(['appTitle']),
...mapMutations(['setRoute']),
mounted() {
    this.setRoute(this.$route.name);
    document.title = this.appTitle();
}

在nuxt.config.js：

transition: {
    name: 'page',
    mode: 'out-in',
    beforeEnter (el) {
        this.$store.commit("setRoute", this.$route.name);
        document.title = this.$store.getters.appTitle;
    }
},

使用nuxt，如何将路径名称放在页面标题中？

2 个答案: