詳解vue beforeEach 死循環(huán)問(wèn)題解決方法
什么是beforeEach？
beforeEach 是一個(gè)vue-router的路由導(dǎo)航鉤子，一般我用它做路由守衛(wèi)。
什么是路由守衛(wèi)？
路由跳轉(zhuǎn)前做一些驗(yàn)證，比如登錄驗(yàn)證，是網(wǎng)站中的普遍需求。對(duì)此，vue-route 提供的beforeRouteUpdate可以方便地實(shí)現(xiàn)導(dǎo)航守衛(wèi)（navigation-guards）。導(dǎo)航守衛(wèi)（navigation-guards）這個(gè)名字，聽(tīng)起來(lái)怪怪的，但既然官方文檔是這樣翻譯的，就姑且這么叫吧。**
文檔地址：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html
舉個(gè)例子，當(dāng)我們沒(méi)有登錄的時(shí)候，跳轉(zhuǎn)到登錄頁(yè)面。如果登錄了，則正常跳轉(zhuǎn)。
下面我們來(lái)看下死循環(huán)代碼。
export const router = new Router(RouterConfig);
router.beforeEach((to, from, next) => {
let token = sessionStorage.getItem('token');
if (token) {
next();
} else {
next({path: '/p404'})
}
});
當(dāng) token 不存在于 session 中，跳轉(zhuǎn)到 /p404，此時(shí)路由改變，再次進(jìn)行判斷，則又跳轉(zhuǎn)到 /404，由此造成了死循環(huán)。在代碼中進(jìn)行一次判斷，如果跳到 p404了，就讓它安心的進(jìn)路由吧。修改后代碼如下。
export const router = new Router(RouterConfig);
router.beforeEach((to, from, next) => {
let token = sessionStorage.getItem('token');
if (token) {
next();
} else {
if (to.path == '/p404') {
next();
} else {
next({path: '/p404'})
}
}
});
到此這篇關(guān)于詳解vue beforeEach 死循環(huán)問(wèn)題解決方法的文章就介紹到這了,更多相關(guān)vue beforeEach 死循環(huán) 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue中v-text / v-html使用實(shí)例代碼詳解
這篇文章主要介紹了vue中v-text / v-html使用實(shí)例代碼詳解,非常不錯(cuò)，代碼簡(jiǎn)單易懂，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
vscode配置vue下的es6規(guī)范自動(dòng)格式化詳解
這篇文章主要介紹了vscode配置vue下的es6規(guī)范自動(dòng)格式化詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
vue中的路由傳值與重調(diào)本路由改變參數(shù)
這篇文章主要介紹了vue中的路由傳值與重調(diào)本路由改變參數(shù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
利用nginx部署vue項(xiàng)目的全過(guò)程
今天要用到服務(wù)器nginx,還需要把自己的vue的項(xiàng)目部署到服務(wù)器上去所以就寫(xiě)一下記錄下來(lái),下面這篇文章主要給大家介紹了關(guān)于利用nginx部署vue項(xiàng)目的相關(guān)資料,需要的朋友可以參考下2022-03-03
這篇文章主要給大家介紹了關(guān)于webstorm建立vue-cli腳手架的傻瓜式教程，文中通過(guò)圖文介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
Vue.js（讀音 /vjuː/, 類(lèi)似于 view） 是一套構(gòu)建用戶界面的 漸進(jìn)式框架。本文給大家介紹Vue.js開(kāi)發(fā)環(huán)境搭建的詳解講解，感興趣的朋友一起看看吧2016-11-11
Vue項(xiàng)目中使用WebUploader實(shí)現(xiàn)文件上傳的方法
WebUploader是由 Baidu WebFE(FEX) 團(tuán)隊(duì)開(kāi)發(fā)的一個(gè)簡(jiǎn)單的以 HTML5為主 ， FLASH為輔 的現(xiàn)代 文件上傳組件 。這篇文章主要介紹了在Vue項(xiàng)目中使用WebUploader實(shí)現(xiàn)文件上傳,需要的朋友可以參考下2019-07-07
我們?cè)诒酒獌?nèi)容里給大家整理了關(guān)于vue框架安裝的步驟以及需要注意的地方，有需要的朋友們學(xué)習(xí)下。2019-02-02
vue移動(dòng)端項(xiàng)目中如何實(shí)現(xiàn)頁(yè)面緩存的示例代碼
這篇文章主要介紹了vue移動(dòng)端項(xiàng)目中如何實(shí)現(xiàn)頁(yè)面緩存的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
Vuejs實(shí)現(xiàn)帶樣式的單文件組件新方法
這篇文章主要為大家詳細(xì)為大家詳細(xì)介紹了Vuejs實(shí)現(xiàn)帶樣式的單文件組件的新方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05