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

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

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

但是，我得到一个错误uncaughtreferenceerror:$route未定义。如果我的标题为：“编辑案例”+this.route.params.id或标题为“编辑案例”+route.params.id或标题为“编辑案例”+this.route.params.id，也会发生同样的情况。我还尝试了标题：“编辑案例“+”：id”，等等

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

以下是其他正在工作的路线的图像：

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

以下是输入相应示例路线时标题的外观： 试试这个。$route或

console.logwindow.location并查看如何从那里检索id

试试这个。$route或

---

console.logwindow.location在那个里，看看你们如何从那个里检索id，我想这可以帮助你们，把它写在文件的挂载钩子里

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

---

让我知道这对你们是否像对我一样有效

我想这可以帮助你们，把它写在文件的挂载钩子里

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

---

让我知道这对你是否像对我一样有效

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

{{Case Detail+$route.params.id}

根据您的具体情况进行编辑：

---

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

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

{{Case Detail+$route.params.id}

根据您的具体情况进行编辑：

---

您可以尝试一件事，如果标题组件是另一个组件，您可以将id作为道具传递给它，这样它将具有id并仅在id可用时呈现动态标题，对于仪表板和服务项目，您可以在id不可用时设置条件，但不幸的是，我认为这是不可能的。如图所示，路由器的元在本质上是静态的

---

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

我曾经试图完成同样的事情，但不幸的是，我认为这是不可能的。如图所示，路由器的元在本质上是静态的

---

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

可以按如下方式设置元值

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

---

可以按如下方式设置元值：

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

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

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

metaInfo是vue meta的一个功能，您可以使用routes params在头部设置任何标记。

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

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

---

metaInfo是vue meta的一个功能，您可以使用routes参数设置头部的任何标记。

我可以从那里获取id，是的。但是我需要向上面指定的路由传递一个id，因为我想显示一个标题，上面写着Edit case XXXXX。没有任何参数的任何其他路线都可以正常工作。外汇。标题：“所有案例”都可以，但它不包含动态参数。我理解您的问题，例如，您的url是case/123。您想将标题显示为编辑案例123I可以从中获取id，是的。但是我需要向上面指定的路由传递一个id，因为我想显示一个标题，上面写着Edit case XXXXX。没有任何参数的任何其他路线都可以正常工作。外汇。标题：“所有案例”都可以，但它不包含动态参数。我理解您的问题，例如，您的url是case/123您想将标题显示为Edit case 123Hi，谢谢您的努力。这是工作，但这不是我要找的。这只会将文档的标题标记更改为编辑案例XXXX。不过，我希望设置一个路由元标题。正如我所提到的，我正在从route meta title呈现标题，如：{{{this.$route.meta.title}}您所建议的不会解决问题。您能发布一个该位置的图像吗

---

题目是，路线改变后它会是什么样子？我已经按照你的要求用图片更新了我的问题。嗨，谢谢你的努力。这是工作，但这不是我要找的。这只会将文档的标题标记更改为编辑案例XXXX。不过，我希望设置一个路由元标题。正如我所提到的，我正在从route meta title在标题上呈现标题，如：{{{this.$route.meta.title}}您所建议的不会解决问题。您能否发布标题所在位置的图像以及更改路线后它将如何处理？我已按照您的要求使用图像更新了我的问题。对不起，但这对我来说是行不通的。VueHeader组件是一个单独的组件，它是从父模板以及内容呈现的。如果我使用这个建议，我最终会得到一个包含案例详细信息的标题的仪表板和服务项。我需要在路由器中设置标题。你可以尝试一件事，如果你的头组件是不同的组件，你可以将id作为道具传递给它，因此，它将具有id并仅在id可用时呈现您的动态标题，对于仪表板和服务项目，您可以在id不可用时设置条件。我也在考虑做类似的事情，但我希望找到更好、适当的方法。只是因为在Vue文档中没有官方的方法来实现这一点，我想我会使用它。编辑您的答案，以便我可以将其作为可接受的答案。谢谢你的帮助和努力！很高兴帮助你！！对不起，这对我来说不起作用。VueHeader组件是一个单独的组件，它是从父模板以及内容呈现的。如果我使用这个建议，我最终会得到一个包含案例详细信息的标题的仪表板和服务项。我需要在路由器中设置标题。你可以尝试一件事，如果你的头组件是不同的组件，你可以将id作为道具传递给它，因此，它将具有id并仅在id可用时呈现您的动态标题，对于仪表板和服务项目，您可以在id不可用时设置条件。我也在考虑做类似的事情，但我希望找到更好、适当的方法。只是因为在Vue文档中没有官方的方法来实现这一点，我想我会使用它。编辑您的答案，以便我可以将其作为可接受的答案。谢谢你的帮助和努力！很高兴帮助你！！