詳解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)文章
門(mén)戶(hù)（Portal）的概念是Vue3的新功能之一，也就是將模板 HTML 移至 DOM 的不同部分的方法。Portal 是 React 中的常見(jiàn)功能，Vue2 的 portal-vue 庫(kù)也提供了相似的功能。在 Vue3 中用 Teleport 對(duì)這個(gè)概念提供了原生支持。本文將介紹Teleport的相關(guān)用法2021-05-05
Vue封裝Swiper實(shí)現(xiàn)圖片輪播效果
圖片輪播是前端中經(jīng)常需要實(shí)現(xiàn)的一個(gè)功能。最近學(xué)習(xí)Vue.js，就針對(duì)Swiper進(jìn)行封裝，實(shí)現(xiàn)一個(gè)簡(jiǎn)單的圖片輪播組件。感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-02-02
Vue3中g(shù)etCurrentInstance、頁(yè)面中route和router的獲取實(shí)現(xiàn)方式
這篇文章主要介紹了Vue3中g(shù)etCurrentInstance、頁(yè)面中route和router的獲取實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
vite項(xiàng)目vite.config.js詳細(xì)配置
vite.config.js是Vite框架中的配置文件,用于配置項(xiàng)目的構(gòu)建和運(yùn)行時(shí)的行為,下面這篇文章主要給大家介紹了關(guān)于vite項(xiàng)目vite.config.js詳細(xì)配置的相關(guān)資料,需要的朋友可以參考下2023-05-05
vue項(xiàng)目多環(huán)境配置(.env)的實(shí)現(xiàn)
最常見(jiàn)的多環(huán)境配置，就是開(kāi)發(fā)環(huán)境配置,和生產(chǎn)環(huán)境配置，本文主要介紹了vue項(xiàng)目多環(huán)境配置的實(shí)現(xiàn)，感興趣的可以了解一下2021-07-07
詳解Vue-axios 設(shè)置請(qǐng)求頭問(wèn)題
這篇文章主要介紹了Vue-axios 設(shè)置請(qǐng)求頭問(wèn)題,文中給大家提到了axios設(shè)置請(qǐng)求頭內(nèi)容的方法，需要的朋友可以參考下2018-12-12
這篇文章主要介紹了Vue中SourceMap的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要介紹了Vue之請(qǐng)求如何傳遞參數(shù)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue3+Vite使用雙token實(shí)現(xiàn)無(wú)感刷新
本文主要介紹了Vue3+Vite使用雙token實(shí)現(xiàn)無(wú)感刷新，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要給大家介紹了關(guān)于vue前端更新后需要清空緩存的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-10-10