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

Posted 2023-02-22

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

【英文标题】：Using nuxt, how do I put the route name in the page title?

【发布时间】：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 中获得这种效果？

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

【参考方案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 中所做的那样。