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

Question

我正在尝试为 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'等。

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

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

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

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

Answer 1

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

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

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

Answer 2

我曾经试图完成同样的事情，但不幸的是，我认为这是不可能的。 正如这个人在 GitHub 上所说的，路由器的元是故意静态的。

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

Answer 3

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

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

Answer 4

如果您使用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 的一个函数，你可以使用路由参数在头上设置任何标签。

Answer 5

试试this.$route或

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

Answer 6

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

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

针对您的情况进行了编辑，这是一个非常具体的情况：

您可以尝试一件事，如果您的 Header Component 是一个不同的组件，您可以将 id 作为道具传递给它，以便它具有 id 并仅在 id 可用时呈现您的动态标题，并且您可以放置​​仪表板和服务项目id 在那里不可用的条件