Vue роутер ссылка работает только после обновления - PullRequest
Новая
       33

Vue роутер ссылка работает только после обновления

0 голосов
/ 09 июля 2019

Я обновляю навигационные ссылки в зависимости от текущего статуса пользователя. Так что, если пользователь не вошел в систему, то показать ссылки регистрации и входа. если пользователь вошел в систему, то показать ссылки на панель управления и выхода из системы. Когда я вхожу, используя форму входа в систему, тогда ссылки меняются на панели навигации, но когда я нажимаю на ссылку «Выйти», она не работает. Означает, что он просто ничего не делает, когда я нажимаю кнопку выхода Даже не ошибка на консоли.

Теперь, если я обновлю страницу, а затем нажму «Выйти», она будет работать и правильно выйдет из системы.

Есть идеи, как решить эту проблему?

Ниже приведен код: 

<ul class="navbar-nav ml-auto">

    <router-link tag="li" active-class="active"
        :to="{ name: 'login' }"
        v-if="!this.$store.getters.isAuthenticated">
        <a href="#" class="nav-link">Login</a>
    </router-link>

    <router-link tag="li" active-class="active"
        :to="{ name: 'register' }"
        v-if="!this.$store.getters.isAuthenticated">
        <a href="#" class="nav-link">Register</a>
    </router-link>

    <router-link tag="li" active-class="active"
        :to="{ name: 'dashboard' }"
        v-if="this.$store.getters.isAuthenticated">
        <a href="#" class="nav-link">Dashboard</a>
    </router-link>

    <router-link tag="li" active-class="active"
        :to="{ name: 'logout' }"
        v-if="this.$store.getters.isAuthenticated">
        <a href="#" class="nav-link">Logout</a>
    </router-link>

</ul>

Ниже приведен код router.js 

export default new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'home',
            component: () => import('./views/Home.vue'),
        },
        {
            path: '/company/login',
            name: 'login',
            component: () => import('./views/Company/Login.vue'),
            meta: {
                forVisitor: true
            }
        },
        {
            path: '/company/register',
            name: 'register',
            component: () => import('./views/Company/Register.vue'),
            meta: {
                forVisitor: true
            }
        },
        {
            path: '/company/logout',
            name: 'logout',
            component: () => import('./views/Company/Logout.vue')
        },
        {
            path: '/dashboard',
            name: 'dashboard',
            component: () => import('./views/Company/Dashboard.vue'),
            meta: {
                forAuth: true
            }
        }
    ]
})

А вот код из файла main.js 

// navigation guard
router.beforeEach(
    (to, from, next) => {
        if(to.matched.some(record => record.meta.forVisitor)){
            if(store.getters.isAuthenticated){
                next({
                    name: "dashboard"
                })
            } else next()
        }
        else if(to.matched.some(record => record.meta.forAuth)){
            if(! store.getters.isAuthenticated){
                next({
                    name: "login"
                })
            } else next()
        }
        else {
            next()
        }
    }
)

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')
...