vue.jsvue-router

How to get current name of route in Vue?


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:

enter image description here

Image to show what i want


Solution

  • 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>