Pass a parameter to Vue router meta title

I am trying to create a dynamic title for a Vue route. It seems I cannot find a way to pass a parameter into meta title. I need it, because I have a VueHeader component, which renders a heading from route meta title. Here’s my code:

  {
    path: '/case/:id',
    name: 'edit-case',
    component: VueEditCase,
    meta: {
      title: 'Edit case ' + $route.params.id,
    },
  },

However, I am getting an error Uncaught ReferenceError: $route is not defined. Same happens if I have title: 'Edit case ' + this.$route.params.id or title: 'Edit case ' + route.params.id or title: 'Edit case ' + this.route.params.id. I’ve also tried title: 'Edit case ' + ':id', etc.

I could not find any answer on the internet, so I am asking for your help here, guys. Anyone got some similar problem and solved it?

Here’s an image of other, working, routes: working routes

Here’s an image of how I am rendering the meta title in header: header renderring from route meta title

Here’s how header looks when entered the respective example routes: route to dashboard route to service items

Answer

I think this can help you, instead of importing meta title from router file, you can create it in your file.

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

my html

output for me

Edited for your condition which is a very specific one:

You can try one thing , if your Header Component is a different component you can pass id as a prop to it, so that it will be having id and render your dynamic title only when id is available and for Dashboard and Service Items you can put a condition when id is not available there

Leave a Reply

Your email address will not be published. Required fields are marked *