Vuejs get current route name and display on the menu

Question

I'm using the vue-menu component, and using it to toggle between different routes. After I switch to another route I want to display the current route name on the dropdown header like so:

I've tried using the life-cycle methods such as beforeCreate , created, mounted... etc but none of them are being called. How can I achieve the desired result?

Answer 1

You should use the "watch"

data() {
    return {
        routeName: null,
    };
},

watch: {
    '$route': 'currentRoute'
},

methods: {
    currentRoute() {
        this.$nextTick(() => {
            this.routeName = this.$route.name
        });
    }
},