Javascript Vue路由器链接仅在刷新后工作
我正在根据当前用户登录状态更新导航链接。所以,若用户并没有登录,那个么显示注册和登录链接。如果用户已登录,则显示仪表板和注销链接。当我使用登录表单登录时,导航栏中的链接会发生变化,但当我单击“注销”链接时,它就不起作用了。这意味着当我单击“注销”时,它什么也不做。控制台上甚至没有错误 现在,如果我刷新页面,然后单击“注销”,那么它将正常工作并正确注销用户 你知道如何解决这个问题吗 代码如下:Javascript Vue路由器链接仅在刷新后工作,javascript,vue.js,vue-router,Javascript,Vue.js,Vue Router,我正在根据当前用户登录状态更新导航链接。所以,若用户并没有登录,那个么显示注册和登录链接。如果用户已登录,则显示仪表板和注销链接。当我使用登录表单登录时,导航栏中的链接会发生变化,但当我单击“注销”链接时,它就不起作用了。这意味着当我单击“注销”时,它什么也不做。控制台上甚至没有错误 现在,如果我刷新页面,然后单击“注销”,那么它将正常工作并正确注销用户 你知道如何解决这个问题吗 代码如下: <ul class="navbar-nav ml-auto"> <route
<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>
下面是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”
-
-
-
-
注意:无需使用此
,您可以像这样进行采样
<li> <router-link active-class="active"
:to="{ name: 'logout' }"
v-if="this.$store.getters.isAuthenticated">
</router-link>Logout</li>
注销
请显示您的路由器代码。您发现url更改了吗?@Styx刚刚用完整代码更新了问题。
<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>
<li> <router-link active-class="active"
:to="{ name: 'logout' }"
v-if="this.$store.getters.isAuthenticated">
</router-link>Logout</li>