使用nuxt，如何将路由名称放在页面标题中? [英] Using nuxt, how do I put the route name in the page title?

问题描述

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

I want to set the page title to a different value for each page.

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

In regular Vue.js, I have done the following:

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

How would I get that effect in nuxt?

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

That is, on both initial page load and when changing pages, I want the browser tab's title to change. For instance, from "My App - About" to "My App - Profile".

推荐答案

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

from nuxt docs, in each pages component you can define the head function that returns the title of page i.e.

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

这篇关于使用nuxt，如何将路由名称放在页面标题中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！