vue router做路由攔截時陷入死迴圈

今天分享一下使用vue-router做路由攔截時遇到的坑。

需要提前了解的api

1：router.beforeeach( to , from ,next) ;

確保要呼叫next方法，否則鉤子就不會被 resolved。

我們一般在寫攔截時會這樣去寫：

router.beforeeach((to, from, next) =>

else
) }
});

上訴的**裡的token ，是你需要存下的乙個登入身份，這裡可以存在store裡或者是localstorage裡，當然 也可以每次進行登入時 從後台獲取。

這時 我們發現，不管我們在哪個頁面攔截進入了死迴圈。其實這算是乙個vue-router的乙個機制了，當我們在router.push( ) 時又重新進入了我們當前的這個router-beforeach事件裡，此時又進行了tokne的判斷，還是沒有token，導致又走到了router.push() 裡，然後就是一直死迴圈。

如下：

router.beforeeach((to, from, next) =>

if(token) 
else
) }
});

這時 在第二次進入這個beforeach時，如果我們需要跳轉到的頁面是 login 頁面，就直接next() 並且不再執行該函式。

1：這個問題其實也是對 vue-router 的router.beforeach執行機制不了解導致

2：router.beforeeach ( ) 可以用來做前端的路由攔截，沒有token時 就跳轉到登入頁。

3：對應的還有router.aftereach 等api 可前往：vue-router api 進行檢視

vue router路由攔截造成死迴圈

筆記 vue router路由攔截造成死迴圈,在做路由攔截的時候，一直出現死迴圈.router的index.js檔案路由配置 const router new router children 一開始路由攔截是這樣寫的,但是這樣的結果就是，在token存在的時候，可以直接訪問login頁面，但是實際專...

vue router路由巢狀

巢狀路由顧名思義就是路由的多層巢狀。結合vue router仿天貓底部導航欄，給元件me新增巢狀路由，也叫子路由。總共新增兩個子路由，分別命名collection.vue 我的收藏 和trace.vue 我的足跡 1 重構router index.js的路由配置，需要使用children陣列來定義子...

vue router 配置路由

vue router 配置路由 用 vue.js vue router 建立單頁應用，是非常簡單的。使用 vue.js 我們已經可以通過組合元件來組成應用程式，當你要把 vue router 新增進來，我們需要做的是，將元件 components 對映到路由 routes 然後告訴 vue rout...