In this short article, we will learn how to find out the current route name in VueJS.
To get the current route name and the path of a page we will have to use the router instance provided by VueJS.
However, finding the route name or path is a little different depending on the version of Vue you are using in your project.
Getting current route name in Vue 2
In Vue 2, we have to use the route instance to get the name. To get the name of the current route we have to use this.$route.name.
Example:
<script>
export default {
computed:{
routeName(){
return this.$route.name
},
}
};
</script>Here, we have used computed but you can also use the created() lifecycle hook to get the route name.
To get the path of the route, we can use this.$route.path .
<script>
export default {
computed:{
routePath(){
return this.$route.path
},
}
};
</script>It will return the path of the route. For example, if you are on the about page, it will return /about (path).
You can also access the route name and path in your Vue template, like this.
<template>
<div>
<span>Current Route is {{$route.name}}</span>
<span>Current Route Path is {{$route.path}}</span>
</div>
</template>Get current route name in Vue 3 with Vue Router 4
If you are using Vue 3 along with Vue Router 4, we can use useRoute() or useRouter() to get the current route name.
Using useRoute():
useRoute() returns us the current route location.
import { useRoute } from 'vue-router';
export default {
setup () {
const routeName = computed(() => {
return useRoute().name
})
return { routeName }
}
}Using useRouter() :
useRouter() returns us the router instance.
import { useRouter } from 'vue-router';
export default {
setup () {
const routeName = computed(() => {
return useRouter().currentRoute.value.name;
})
return { routeName }
}
}Both useRoute() and useRouter() must be used inside of setup().
Related Topics:
Set URL Query Params In Vue Using Vue-Router
