我正在根据当前用户登录状态更新导航链接。因此,如果用户未登录,则显示注册和登录链接。如果用户已登录,则显示仪表板和注销链接。当我使用登录表单登录时,导航栏中的链接会发生变化,但是当我单击“注销”链接时,它不起作用。意味着当我单击注销时它根本不执行任何操作。控制台上什至没有错误。
现在,如果我刷新页面,然后单击“注销”,它就会正常工作并正确注销用户。
知道如何解决这个问题吗?
代码如下:
<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')
最佳答案
试试这个主要问题是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>
关于javascript - Vue 路由器链接仅在刷新后工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56948984/