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

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

Answer 1

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

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