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