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

【问题标题】：Using nuxt, how do I put the route name in the page title?使用 nuxt，如何将路由名称放在页面标题中？
【发布时间】：2018-06-25 09:52:15
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript vue.js vue-router nuxt.js

【解决方案1】：

来自nuxt docs，在每个pages 组件中，您可以定义返回页面标题的head 函数，即

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

【讨论】：

这很有效——我可以将静态页面名称放入其中，但这并不适用于所有情况。我想使用 vuex 存储来计算页面名称，因为它在某些情况下会包含一个星号。但是将它与mounted() { document.title = } 结合起来效果很好。谢谢！
head() { return { title: this.$route.name } },
@CharlesBrandt 该建议非常有效。谢谢

【解决方案2】：

我找到了一种方法来做到这一点，但我不知道这是否是“正确”的方式。我使用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;
    }
},

【讨论】：

你看我的回答了吗？
这个答案对我来说很有效，因为我有一个大型应用程序并在一个 js 文件中以编程方式管理我的所有路线和元数据；在那里管理标题也很有意义。我宁愿不必处理遍布各处的众多页面组件中的title。
另外：使用document.title 似乎是合法的，就像 vue-creator Evan You 本人在these title snippets 中所做的那样。