vue.js - 将参数传递给Vue路由器中的元标题

Question

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

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

score 4 · Accepted Answer

您可以在组件中更轻松地执行此操作。我会在那个组件上尝试这样的事情：

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

并删除标题元功能。

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

score 0 · Accepted Answer

您可以将其传递给props：

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

然后只需title在组件中定义道具Profile：

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

score 0 · Accepted Answer

您可以使用 meta 作为函数：

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

然后在您的模板中将其作为一个函数调用

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

3 回答 3