How to get current name of route in Vue?

Question

I want to get the name of the current route of vue-router, i have a component menu with navigation to another componentes, so i want to dispaly the name of the current route. I have this:

created(){     this.currentRoute;     //this.nombreRuta = this.$route.name; }, computed:{     currentRoute:{         get(){             this.nombreRuta = this.$route.name;         }     } } 

But the label of the name of the route does not change, the label only show the name of the first loaded route. Thank You

EDIT:

Image to show what i want

Answer 1

You are using computed incorrectly. You should return the property in the function. See the docs for more information.

Here is your adapted example:

computed: {     currentRouteName() {         return this.$route.name;     } } 

You can then use it like this:

<div>{{ currentRouteName }}</div> 

You can also use it directly in the template without using a computed property, like this:

<div>{{ $route.name }}</div>