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

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 中获得这种效果？

也就是说，在初始页面加载和更改页面时，我希望浏览器选项卡的标题发生变化。例如，从 "My App - About" 到 "My App - Profile"。

Answer 1

从 nuxt docs 开始，在每个 pages 组件中，您可以定义 returns 页面标题的 head 函数，即

head() {
    return {
      title: "About page"
    };
  }

Answer 2

我找到了一种方法，但我不知道它是否是 "right" 方法。我在 default.vue 中使用 mounted() 函数进行初始页面加载，在 nuxt.config.js 中使用 transition 属性进行每次页面更改。所以，在 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，如何将路由名称放在页面标题中？

Using nuxt, how do I put the route name in the page title?

javascript

vue.js

vue-router

nuxt.js