vue.js - Vue 路由器 : How to dynamically generate page titles for dynamic routes?

Question

我有一个使用 Vue CLI 创建的基于 Vue 的简单网站，我正在尝试弄清楚如何为具有动态路由的 View 动态生成页面标题。该站点正在从 headless CMS 中提取 JSON 数据，并且我为“项目”内容类型的详细 View 设置了动态路由。我的动态路由设置如下:

// single project vue (dynamic)
{
    path: "/projects/:project_name_slug",
    name: "single-project",
    component: () =>
        import(
            /* webpackChunkName: "single-project" */ "./views/SingleProject.vue"
        ),
    meta: {
        title: "project detail",
    }
}

我添加了以下内容，用于添加静态页面标题:

// show page titles
const DEFAULT_TITLE = "my blog";
router.afterEach((to, from) => {
    // document.title = to.meta.title || DEFAULT_TITLE;
    document.title = "my blog - " + to.meta.title || DEFAULT_TITLE;
});

就目前而言，在访问项目详细信息 View 时，标题将显示为“我的博客 - 项目详细信息”；但是，我希望它从 project_name 的 JSON/字段数据中提取实际项目名称。 (就像路线路径使用 project_name_slug 一样)，但到目前为止我尝试过的一切都没有奏效。例如，使用 meta: { title: (route) => route.params.project_name }只会导致在“我的博客 - ”之后显示原始函数文本。因此，对于那些动态 View ，我想要 to.meta.title解析为项目名称，创建“我的博客 - {项目名称}”。感谢您在此提供的任何帮助，如果我需要提供更多详细信息，请告诉我。
*注意:此问题与 this SO thread 中提出的问题不同因为我的情况涉及使用通过 Axios 请求的 JSON 数据的动态路由

Answer 1

这是旧的，但如果它可以帮助任何人，我只是遇到了这个问题，我发现使用 router.afterEach 静态标题的组合与动态标题的 mixin 结合使用。
在 OP 解释的情况下，我会从路由器和 afterEach 中的任何动态页面中删除标题 Prop ，只需检查 meta.title

router.afterEach(to => {
  if (to.meta.title) {
    document.title = `${to.meta.title} - my blog`;
  }
});

然后为其他页面创建一个简单的 mixin，例如:

export default {
  methods: {
    setTitle(str) {
        document.title = `${str} - my blog`
    }
  }
}

然后在那些动态页面中，一旦从服务器加载了任何动态数据，您只需调用 this.setTitle() 即可。我知道这看起来太容易了，但它确实有效。我在 SO 上找到的所有 beforeEach 方法都遇到了问题。
注意:这不适用于 SEO 或网络爬虫(为此我推荐 prerenderSpa)，但确实为您提供了不错的标题、后退按钮历史记录和书签。