詳解vue beforeEach 死循環(huán)問題解決方法
什么是beforeEach？
beforeEach 是一個vue-router的路由導(dǎo)航鉤子，一般我用它做路由守衛(wèi)。
什么是路由守衛(wèi)？
路由跳轉(zhuǎn)前做一些驗證，比如登錄驗證，是網(wǎng)站中的普遍需求。對此，vue-route 提供的beforeRouteUpdate可以方便地實現(xiàn)導(dǎo)航守衛(wèi)（navigation-guards）。導(dǎo)航守衛(wèi)（navigation-guards）這個名字，聽起來怪怪的，但既然官方文檔是這樣翻譯的，就姑且這么叫吧。**
文檔地址：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html
舉個例子，當(dāng)我們沒有登錄的時候，跳轉(zhuǎn)到登錄頁面。如果登錄了，則正常跳轉(zhuǎn)。
下面我們來看下死循環(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，此時路由改變，再次進行判斷，則又跳轉(zhuǎn)到 /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'})
}
}
});
到此這篇關(guān)于詳解vue beforeEach 死循環(huán)問題解決方法的文章就介紹到這了,更多相關(guān)vue beforeEach 死循環(huán) 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
門戶（Portal）的概念是Vue3的新功能之一，也就是將模板 HTML 移至 DOM 的不同部分的方法。Portal 是 React 中的常見功能，Vue2 的 portal-vue 庫也提供了相似的功能。在 Vue3 中用 Teleport 對這個概念提供了原生支持。本文將介紹Teleport的相關(guān)用法2021-05-05
圖片輪播是前端中經(jīng)常需要實現(xiàn)的一個功能。最近學(xué)習(xí)Vue.js，就針對Swiper進行封裝，實現(xiàn)一個簡單的圖片輪播組件。感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-02-02
Vue3中g(shù)etCurrentInstance、頁面中route和router的獲取實現(xiàn)方式
這篇文章主要介紹了Vue3中g(shù)etCurrentInstance、頁面中route和router的獲取實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
vite.config.js是Vite框架中的配置文件,用于配置項目的構(gòu)建和運行時的行為,下面這篇文章主要給大家介紹了關(guān)于vite項目vite.config.js詳細配置的相關(guān)資料,需要的朋友可以參考下2023-05-05
vue項目多環(huán)境配置(.env)的實現(xiàn)
最常見的多環(huán)境配置，就是開發(fā)環(huán)境配置,和生產(chǎn)環(huán)境配置，本文主要介紹了vue項目多環(huán)境配置的實現(xiàn)，感興趣的可以了解一下2021-07-07
這篇文章主要介紹了Vue-axios 設(shè)置請求頭問題,文中給大家提到了axios設(shè)置請求頭內(nèi)容的方法，需要的朋友可以參考下2018-12-12
這篇文章主要介紹了Vue中SourceMap的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要介紹了Vue之請求如何傳遞參數(shù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
本文主要介紹了Vue3+Vite使用雙token實現(xiàn)無感刷新，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要給大家介紹了關(guān)于vue前端更新后需要清空緩存的相關(guān)資料,文中通過代碼介紹的非常詳細,對大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價值,需要的朋友可以參考下2024-10-10