Get the Current Name of Route in Vue

Purpose

To get the current route name in a Vue application using Vue Router.

Prerequisites

• Vue Router must be properly configured in your project.
• Routes must include a name field.

let obj = {
 path: '/about',
 name: 'About',
 component: About
}

Vue 3 (Composition API)

• Use the useRoute() function from vue-router.
• route.name gives the name of the current route.

import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.name)

Vue 2 (Options API)

Use $route.name inside the component context.

export default {
 mounted() {
   console.log(this.$route.name)
 }
}

Notes

The route name is useful for navigation, conditionals, analytics, and breadcrumbs.
If name is not defined in the route config, it will return undefined.

Also Read:

VueJs Projects