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

【问题标题】：Passing param to meta title in vue router将参数传递给Vue路由器中的元标题
【发布时间】：2023-03-14 22:45:01
【问题描述】：

我想将路由参数传递给元标题，但我不知道该怎么做。我尝试做的事情一直在标题选项卡上返回未定义：

{
  path:'/profile/:name',
  component: Profile,
  meta: { title: route.param.name + 'place' }
}

【问题讨论】：

【解决方案1】：

您可以在组件中更轻松地做到这一点。我会在那个组件上尝试这样的事情：

created: function () {
  document.title = this.$route.params.name + ' place'
}

并删除标题元功能。

{
  path:'/profile/:name',
  component: Profile,
}

【讨论】：

【解决方案2】：

您可以将其传递给props：

{
  path:'/profile/:name',
  component: Profile,
  props: route => ({ title: route.param.name + 'place' })
}

然后只需在您的 Profile 组件中定义 title 属性：

props: {
  title: {
    type: String,
    default: '',
  },
},

【讨论】：

【解决方案3】：

您可以将元用作函数：

{
  path:'/profile/:name',
  component: Profile,
  meta: (route) => { title: route.params.name + 'place' }
}

然后在你的模板中调用它作为一个函数

this.$route.meta(this.$route)

【讨论】：