How to get current name of route in Vue?

vue.js vue-router

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:

https://i.stack.imgur.com/7hNhn.png

Image to show what i want

Did you try to manually entering the url of your route in the browser address bar?

@bgsuello everything works, only i want to show a label in the template of the name of the current route in the title of my navigation menu component

Your getter should return this.$route.name.

computed may not be the place to do this, try running a method that sets this.$route.name in the mounted() hook

OR try doing it in the beforeEach hook in the routes file, see this: stackoverflow.com/questions/49685780/…

tony19

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>

@ali6p I think, you mean $router.currentRoute (with an additional r at the end). This command returns the $route object. See also router.vuejs.org/api/#router-currentroute and router.vuejs.org/api/#the-route-object

Yeah, you are right. I use $router.currentRoute.name but I wrote without r :) Thank you. So what do you think? I define router in main.js and use $router.currentRoute.name. Only .name doesn't work.

If your template does not get updated with the above computed variable, the problem is probably somewhere else. Are you sure, you are actually updating the route? You might want to ask a new question on StackOverflow and link it here.

this example return always "null" why?

At this point in time, the right answer is probably this.$route.path. Try and console.log(this.$route) and see if there is anything else you would prefer.

Shiva127

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

Instead of using setup(), I just used computed: { route: () => useRoute() } and then {{ route.name }} in the template

Yurifull

I use this...

this.$router.history.current.path

Thanks for your contribution. Can you explain why it works to solve the OP's issue? Why do you "use this"? Explanations help future users, increase long term value, are of higher quality, and are more likely to be upvoted. Consider editing to add more context.

This works, but only in Vue 2. Starting with Vue 3, accessing the current route from within $router is .currentRoute.value.path as described above

Anirudh

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

This is absolute working with VUEJS 3 with Composition API.

ux.engineer

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!

This is a lot of code for something so simple!

tranmani

I use this...

this.$route.name

Dharman

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.

Saddan

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

Illuminati

this.$router.currentRoute.value.name;

Works just like this.$route.name.

Skoua

Using Vue 3 and Vue Router 4 with Composition API and computed:

<script setup>
    import { computed } from 'vue'
    import { useRouter } from 'vue-router'

    // computed
    const currentRoute = computed(() => {
        const router = useRouter()
        return router.currentRoute.value.name
    })
</script>

<template>
    <div>{{ currentRoute }}</div>
</template>

⚠ If you don't set a name in your router like so, no name will be displayed:

const routes = [
    { path: '/step1', name: 'Step1', component: Step1 },
    { path: '/step2', name: 'Step2', component: Step2 },
];

How to get current name of route in Vue?

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Contact US