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

Question

我想将路径参数传递给元标题，但是我不知道该怎么做。我尝试做的事情总是在标题选项卡上返回undefined：

.wrapper {
  position: relative;
  height: 100%;
}

.div1{
 height: 50px;
 border: 1px solid green;
 text-align: center;
 width:55%;
 position: absolute;
 top:0;
 left:0;
}
.div2{
 width:55%;
 position:absolute;
 left:0;
 height: 50px;
 border: 1px solid green;
}

Answer 1

您可以在组件中更轻松地完成此操作。我会在该组件上尝试类似的方法：

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

并删除标题元功能。

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

Answer 2

您可以将其传递给props：

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

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

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

Answer 3

您可以将meta用作函数：

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

然后将其称为模板中的功能

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