How to get current name of route in Vue?

vue.jsVue Router

vue.js Problem Overview


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

vue.js Solutions


Solution 1 - vue.js

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>

Solution 2 - vue.js

Vue 3 + Vue Router 4

Update 5/03/2021

If you are using Vue 3 and Vue Router 4, here is two simplest ways to get current name of route in setup hook:

Solution 1: Use useRoute

import { useRoute } from 'vue-router';
export default {
  setup () {
    const currentRoute = computed(() => {
      return useRoute().name
    })
    return { currentRoute }
  }
}

Solution 2: Use useRouter

import { useRouter } from 'vue-router';
export default {
  setup () {
    const currentRoute = computed(() => {
      return useRouter().currentRoute.value.name;
    })
    return {currentRoute}
  }
}

Solution 3 - vue.js

I use this...

this.$router.history.current.path

Solution 4 - vue.js

In Composition API, this works

import { useRouter } from 'vue-router'

const router = useRouter()

let currentPathObject = router.currentRoute.value; 
 
console.log("Route Object", currentPathObject)

// Pick the values you need from the object

Solution 5 - vue.js

This is how you can access AND watch current route's name using @vue/composition-api package with Vue 2 in TypeScript.

<script lang="ts">
import { defineComponent, watch } from '@vue/composition-api';

export default defineComponent({
  name: 'MyCoolComponent',
  setup(_, { root }) {
    console.debug('current route name', root.$route.name);

    watch(() => root.$route.name, () => {
      console.debug(`MyCoolComponent- watch root.$route.name changed to ${root.$route.name}`);
    });
  },
});
</script>

I will update this answer once Vue 3.0 and Router 4.0 gets released!

Solution 6 - vue.js

I use this...

this.$route.name

Solution 7 - vue.js

I used something like this:

import { useRoute } from 'vue-router';

then declared

const route = useRoute();

Finally if you log route object - you will get all properties I used path for my goal.

Solution 8 - vue.js

In my Laravel app I created a router.js file and I can access the router object in any vue component like this.$route

I usually get the route like this.$route.path

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionIsa&#237;as Orozco ToledoView Question on Stackoverflow
Solution 1 - vue.jsssc-hrep3View Answer on Stackoverflow
Solution 2 - vue.jsKitKitView Answer on Stackoverflow
Solution 3 - vue.jsYurifullView Answer on Stackoverflow
Solution 4 - vue.jsAnirudhView Answer on Stackoverflow
Solution 5 - vue.jsux.engineerView Answer on Stackoverflow
Solution 6 - vue.jstranmaniView Answer on Stackoverflow
Solution 7 - vue.jsArchil LabadzeView Answer on Stackoverflow
Solution 8 - vue.jsSaddanView Answer on Stackoverflow