Vue路由器链接仅在刷新后才起作用答案

【问题标题】：Vue router link working only after refreshVue路由器链接仅在刷新后才起作用
【发布时间】：2019-11-18 19:10:26
【问题描述】：

我正在根据当前用户登录状态更新导航链接。因此，如果用户未登录，则显示注册和登录链接。如果用户已登录，则显示仪表板和注销链接。当我使用登录表单登录时，导航栏中的链接会更改，但是当我单击“注销”链接时，它不起作用。意味着当我单击注销时它根本不做任何事情。控制台上甚至没有错误。

现在，如果我刷新页面，然后单击“注销”，那么它可以正常工作并正确注销用户。

知道如何解决这个问题吗？

下面是代码：

<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')

【问题讨论】：

请出示您的路由器代码。
你发现网址变了吗？
@Styx 刚刚用完整代码更新了问题。

标签： javascript vue.js vue-router

【解决方案1】：

试试这个主要问题是tag="li"

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

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


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

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

</ul>

注意：不需要这个<a href="#" class="nav-link">Logout</a>，你可以简单地做喜欢

<li> <router-link active-class="active"
            :to="{ name: 'logout' }"
            v-if="this.$store.getters.isAuthenticated">

        </router-link>Logout</li>

【讨论】：