在網(wǎng)站開發(fā)過程中，登錄功能是必不可少的。但是在使用Vue開發(fā)時，往往會遇到一個問題，就是登錄后頁面并沒有跳轉(zhuǎn)。這個問題的原因可能有很多，下面將會逐一說明。

//路由配置
export default new Router({
 routes: [
{
path: '/login',
name: 'login',
component: Login
},
{
path: '/home',
name: 'home',
component: Home
meta: {
requireAuth: true //需要登錄才能跳轉(zhuǎn)的頁面設置該屬性
}
}
 ]
})

首先，我們需要在路由配置文件中對頁面進行設置，設置需要登錄才能進入的頁面。這里我們使用meta屬性來實現(xiàn)這個功能。那么，我們在頁面組件中就需要判斷是否已經(jīng)登錄才能跳轉(zhuǎn)到需要登錄才能進入的頁面。

//在需要判斷是否已經(jīng)登錄的組件中引入vuex
import { mapGetters } from 'vuex'
//在需要登錄才能進入的頁面組件中加入如下代碼
computed: {
 ...mapGetters([
'isLogin'
 ])
},
beforeMount () {
 if (!this.isLogin) {
this.$router.push({name: 'login'})
 }
}

我們可以在需要判斷是否已經(jīng)登錄的組件中引入vuex，并在需要登錄才能進入的頁面組件中加入上面的代碼。這樣，在頁面渲染之前，我們就能判斷是否已經(jīng)登錄。如果沒有登錄，則跳轉(zhuǎn)到登錄頁面。這里需要注意的是，使用vuex判斷是否已經(jīng)登錄需要先在store文件夾中定義相關的state和getter。

//在store文件夾中定義login的state和getter
const state = {
 isLogin: false //是否已經(jīng)登錄
}
const getters = {
 isLogin: state =>state.isLogin
}
export default new Vuex.Store({
 state,
 getters
})
//在登錄成功后調(diào)用mutation改變isLogin的值
this.$store.commit('login')
//在需要退出登錄時調(diào)用mutation改變isLogin的值
this.$store.commit('logout')

現(xiàn)在，我們需要在登錄成功后調(diào)用mutation改變isLogin的值。在需要退出登錄時，我們也需要調(diào)用mutation改變isLogin的值。這樣，每次判斷是否已經(jīng)登錄時，就能正確地返回已經(jīng)登錄的狀態(tài)。

除此之外，可能還有一些其他的原因?qū)е碌卿浐箜撁娌惶D(zhuǎn)。例如：當你使用axios進行請求時，沒有帶上cookie會導致登錄狀態(tài)丟失等等。總之，出現(xiàn)問題的原因可能有很多，需要我們仔細地排查。只要你仔細地分析，一定會找到問題的源頭并解決。