vuejs router - this.$route is always empty on refresh

Question

I'm trying to set the class nav-active to the correct nav element, based from what url you're directly accessing the webapp for the first time.

I have a few routes:

export default new Router({
mode: 'history',
routes: [
    {
    path: '/',
    name: 'home',
    component: () => import('./views/Home.vue')
    },
    {
    path: '/account',
    name: 'account',
    component: () => import('./views/Account.vue')
    }
    ]
});

And this is my navigation bar component (NavBar):

export default {
    name: 'NavBar',
    components: {
        NavLogo,
        NavItem
    },
    data() {
        return {
            navItems: [
                {           /* root navigation */
                    id: 0,
                    type: 'root',
                    name: 'home',
                    route: '/',
                    active: this.$route.name === 'home' }, 
                {
                    id: 1,
                    type: 'root',
                    name: 'account',
                    route: '/account',
                    active: false
                }

        }
    }
}

The state of the active boolean inside navItems determines whether the navigation element should have the nav-active class. I'm trying to use the current route to determine whether active should be true or false, by using it this way:

active: this.$route.name === 'account'

But once for example I enter this dashboard directly from: http://localhost:8000/account this.$route's items are all empty and the path is always /

Help is much appreciated, Thanks

cuzox · Accepted Answer · 2019-04-11 21:01:02Z

4

You are not tracking this.$route.name changes by default with this approach. Try creating a computed property that resolves to this.$route.name, and use this in your data property declaration. In fact, you can just stick the whole thing in a computed property, since you're unlikely to change this.

export default {
    name: 'NavBar',
    components: {
        NavLogo,
        NavItem
    },
    computed: {
        routeName(){
           return this.$route.name
        },
        navItems(){
            return [
                {           /* root navigation */
                    id: 0,
                    type: 'root',
                    name: 'home',
                    route: '/',
                    active: this.routeName === 'home' }, 
                {
                    id: 1,
                    type: 'root',
                    name: 'account',
                    route: '/account',
                    active: false
                }
            ]
        }
    }
}

edited Apr 11, 2019 at 21:01

answered Apr 11, 2019 at 20:18

cuzox

8048 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

tosi Over a year ago

Hmm, both computed and created() properties don't return the correct this.$route, do you have any examples?

cuzox Over a year ago

I edited the answer! You were missing a closing square bracket there

Collectives™ on Stack Overflow

vuejs router - this.$route is always empty on refresh

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related