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 ponent, which renders a heading from route meta title. Here's my code:

  {
    path: '/case/:id',
    name: 'edit-case',
    ponent: 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:

Here's an image of how I am rendering the meta title in header:

Here's how header looks when entered the respective example routes:

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 ponent, which renders a heading from route meta title. Here's my code:

  {
    path: '/case/:id',
    name: 'edit-case',
    ponent: 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:

Here's an image of how I am rendering the meta title in header:

Here's how header looks when entered the respective example routes:

• javascript
• vue.js
• vuejs2
• vue-router

6 Answers 6

I was once trying to acplish the same thing, but unfortunately, I think it is not possible. As this guy says on GitHub, router's meta is intentionnally static.

If you are trying to make the document's <title> tag dynamic, I would suggest you to try Vue-Meta. I really love this plugin and use it on every Vue SPA project.

i think this can help you, write this in mounted hook of the file

mounted() {
  document.title = "Edit Case " + this.$route.params.id
}

let me know if this worked for you as it did for me

It is possible to set the meta value like follows,

this.$route.meta.title = "Your title";

In your case, you can watch the route changes from any of the parent ponent and set the meta value.

    watch: {
        // watching the route
        '$route': function () {
            // if params and id
            if (this.$route.params && this.$route.params.id) {
                this.$route.meta.title = "Your title " + this.$route.params.id;
            }
        }
    }

If you use VUE META, follow the doc to setup title on each ponent of views, so, in the ponent with params on url, add this code

<script>
export default {
  name: "MyComponent",
  metaInfo() {
    return {
      title: () => {
        return "My title with params " + this.$route.params.my_param;
      }
    };
  }
};
</script>

metaInfo() is a function of vue meta that you can use routes params to set any tag on head.

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>

Edited for your condition which is a very specific one:

You can try one thing , if your Header Component is a different ponent 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

try this.$route or

console.log(window.location) there and see how you can retrieve id from there