将参数传递给 Vue 路由器元标题答案

【问题标题】：Pass a parameter to Vue router meta title将参数传递给 Vue 路由器元标题
【发布时间】：2020-03-19 09:10:38
【问题描述】：

我正在尝试为 Vue 路由创建动态标题。似乎我找不到将参数传递给元标题的方法。我需要它，因为我有一个 VueHeader 组件，它从路线元标题呈现标题。这是我的代码：

  {
    path: '/case/:id',
    name: 'edit-case',
    component: VueEditCase,
    meta: {
      title: 'Edit case ' + $route.params.id,
    },
  },

但是，我收到错误 Uncaught ReferenceError: $route is not defined。如果我有title: 'Edit case ' + this.$route.params.id 或title: 'Edit case ' + route.params.id 或title: 'Edit case ' + this.route.params.id，也会发生同样的情况。我也试过title: 'Edit case ' + ':id'等。

我在互联网上找不到任何答案，所以我在这里寻求您的帮助，伙计们。有人遇到过类似的问题并解决了吗？

这是其他工作路线的图片：

这是我如何在标题中呈现元标题的图像：

以下是输入相应示例路由时标头的外观：

【问题讨论】：

标签： javascript vue.js vuejs2 vue-router

【解决方案1】：

我曾经试图完成同样的事情，但不幸的是，我认为这是不可能的。正如this guy says on GitHub，路由器的元数据是故意静态的。

如果您尝试使文档的<title> 标记动态化，我建议您尝试Vue-Meta。我真的很喜欢这个插件，并在每个 Vue SPA 项目中使用它。

【讨论】：

【解决方案2】：

可以像下面这样设置元值，

this.$route.meta.title = "Your title";

在您的情况下，您可以从任何父组件查看路由更改并设置元值。

    watch: {
        // watching the route
        '$route': function () {
            // if params and id
            if (this.$route.params && this.$route.params.id) {
                this.$route.meta.title = "Your title " + this.$route.params.id;
            }
        }
    }

【讨论】：

【解决方案3】：

如果您使用VUE META，请按照文档为视图的每个组件设置标题，因此，在 url 带有参数的组件中，添加此代码

<script>
export default {
  name: "MyComponent",
  metaInfo() {
    return {
      title: () => {
        return "My title with params " + this.$route.params.my_param;
      }
    };
  }
};
</script>

metaInfo() 是 vue meta 的一个函数，你可以使用路由参数来设置头部的任何标签。

【讨论】：

【解决方案4】：

我认为这可以帮助你，把这个写在文件的mounted hook

mounted() {
  document.title = "Edit Case " + this.$route.params.id
}

让我知道这是否对你有用

【讨论】：

您好，感谢您的努力。这是有效的，但这不是我想要的。这只会将文档的标题标签更改为“编辑案例 XXXX”。但是，我希望设置一个路线元标题。正如我所提到的，我正在从路由元标题中渲染标题，如下所示：<h1>{{ this.$route.meta.title }}</h1> 你的建议不会解决问题。
你能发一张图片，说明该标题在哪里以及路线更改后的外观
按照您的要求，我用图片更新了我的问题。

【解决方案5】：

我认为这可以帮助你，而不是从路由器文件中导入元标题，你可以在你的文件中创建它。

<h1>{{ "Case Detail " + $route.params.id }}</h1>

根据您的情况进行编辑，这是一个非常具体的情况：

您可以尝试一件事，如果您的 Header 组件是一个不同的组件，您可以将 id 作为道具传递给它，这样它就会有 id 并仅在 id 可用时呈现您的动态标题以及仪表板和服务项目当 id 不可用时，您可以设置条件

【讨论】：

对不起，但这在我的情况下不起作用。 VueHeader 组件是一个单独的组件，并且正在从父模板以及内容呈现。如果我使用这个建议，我最终会得到Dashboard 和Service items 的标题为“Case Detail”。我需要在 router. 中设置标题
您可以尝试一件事，如果您的 Header Component 是不同的组件，您可以将 id 作为道具传递给它，这样它就会拥有 id 并仅呈现您的动态标题当id 可用时，对于Dashboard 和Service Items，您可以在id 不可用时设置条件。
我也在考虑做类似的事情，但我希望能找到更好、更合适的方法。只是因为在 Vue 文档中没有官方的方法来实现这一点，我想我会用这个。编辑您的答案，以便我将其设为“已接受的答案”。并感谢您的帮助和努力！
很高兴为您提供帮助！！

【解决方案6】：

试试this.$route 或

console.log(window.location) 那里，看看如何从那里检索 id

【讨论】：

我可以从那里得到一个 id，是的。但是我需要将一个 id 传递给上面指定的路由，因为我想显示一个标题为“Edit case XXXXX”。我没有任何参数的任何其他路线都可以正常工作。外汇。 title: 'All cases' 可以正常工作，但它不包含动态参数。
我理解您的问题，例如您的网址是case/123，您想将您的标题显示为Edit case 123