Passing param to meta title in vue router

Viewed 1537

I want to pass route param to meta title but i have no idea how to do it. What i tried doing keeps returning undefined on the title tab: image result

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

You can do this easier in the component. I would try something like this on that component:

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

and remove the title meta function.

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

You can pass it to props instead:

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

Then just define the title prop in your Profile component:

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

You can use meta as a function :

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

then call it as a function of course in your template

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