时间戳

首页 > 解决方案 > Vue路由器：如何为动态路由动态生成页面标题？

vue.js - Vue路由器：如何为动态路由动态生成页面标题？

问题描述

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

// 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;
});

就目前而言，在访问项目详细信息视图时，标题将显示为“我的博客 - 项目详细信息”；但是，我希望它从 JSON/字段数据中提取实际的项目名称project_name（就像路由路径正在使用一样project_name_slug），但到目前为止我没有尝试过任何工作。例如，使用meta: { title: (route) => route.params.project_name }just 会导致原始函数文本显示在“我的博客 -”之后。因此，对于那些动态视图，我想to.meta.title解析为项目名称，创建“我的博客 - {项目名称}”。感谢您在这里提供的任何帮助，如果我需要提供更多详细信息，请告诉我。

*注意：这个问题与这个 SO 线程中提出的问题不同，因为我的案例涉及使用通过 Axios 请求的 JSON 数据的动态路由

标签： vue.jsvue-routervue-cli

解决方案

这是旧的，但如果它对任何人有帮助，我刚刚遇到了这个问题，我发现一个组合使用 router.afterEach 用于静态标题与 mixin 用于动态标题。

在 OP 解释的情况下，我会从路由器和 afterEach 中的任何动态页面中删除 title 道具，只需检查 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），但它确实为您提供了不错的标题、后退按钮历史记录和书签。

推荐阅读