在網站開發過程中,登錄功能是必不可少的。但是在使用Vue開發時,往往會遇到一個問題,就是登錄后頁面并沒有跳轉。這個問題的原因可能有很多,下面將會逐一說明。
//路由配置
export default new Router({
routes: [
{
path: '/login',
name: 'login',
component: Login
},
{
path: '/home',
name: 'home',
component: Home
meta: {
requireAuth: true //需要登錄才能跳轉的頁面設置該屬性
}
}
]
})
首先,我們需要在路由配置文件中對頁面進行設置,設置需要登錄才能進入的頁面。這里我們使用meta屬性來實現這個功能。那么,我們在頁面組件中就需要判斷是否已經登錄才能跳轉到需要登錄才能進入的頁面。
//在需要判斷是否已經登錄的組件中引入vuex
import { mapGetters } from 'vuex'
//在需要登錄才能進入的頁面組件中加入如下代碼
computed: {
...mapGetters([
'isLogin'
])
},
beforeMount () {
if (!this.isLogin) {
this.$router.push({name: 'login'})
}
}
我們可以在需要判斷是否已經登錄的組件中引入vuex,并在需要登錄才能進入的頁面組件中加入上面的代碼。這樣,在頁面渲染之前,我們就能判斷是否已經登錄。如果沒有登錄,則跳轉到登錄頁面。這里需要注意的是,使用vuex判斷是否已經登錄需要先在store文件夾中定義相關的state和getter。
//在store文件夾中定義login的state和getter
const state = {
isLogin: false //是否已經登錄
}
const getters = {
isLogin: state =>state.isLogin
}
export default new Vuex.Store({
state,
getters
})
//在登錄成功后調用mutation改變isLogin的值
this.$store.commit('login')
//在需要退出登錄時調用mutation改變isLogin的值
this.$store.commit('logout')
現在,我們需要在登錄成功后調用mutation改變isLogin的值。在需要退出登錄時,我們也需要調用mutation改變isLogin的值。這樣,每次判斷是否已經登錄時,就能正確地返回已經登錄的狀態。
除此之外,可能還有一些其他的原因導致登錄后頁面不跳轉。例如:當你使用axios進行請求時,沒有帶上cookie會導致登錄狀態丟失等等。總之,出現問題的原因可能有很多,需要我們仔細地排查。只要你仔細地分析,一定會找到問題的源頭并解決。
上一篇vue 畫幅位置調整
下一篇c++ json 實例