How to get current name of route in Vue?
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>
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} }}