快捷導(dǎo)航

vue-router使用next()跳轉(zhuǎn)到指定路徑時會無限循環(huán)問題

更新時間：2023年11月16日 16:17:32 作者：web_blog

這篇文章主要介紹了vue-router使用next()跳轉(zhuǎn)到指定路徑時會無限循環(huán)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

解釋1

beforeRouteLeave (to, from, next) {
        console.log('離開路路由')
       if(to.fullPath==='/home'){
         next();
       }else{
         next('/home')
       }

這個是組件路由，我想實現(xiàn)的效果是在這個頁面點擊瀏覽器的返回按鈕后要返回 /home頁面而不是上一個頁面，上面的代碼是沒問題的，而我之前的寫法就一直死循環(huán)

// 下面的寫法會死循環(huán)
     beforeRouteLeave (to, from, next) {
        console.log('離開路路由')
       next('/home')
}

vue-router的next()方法無參和有參時是不一樣的

當(dāng)執(zhí)行鉤子函數(shù)時如果遇到next(’/home’)等時會中斷當(dāng)前導(dǎo)航，

比如當(dāng)前導(dǎo)航是去/a,那么遇到next(’/home’)后就會把to.path改為/home，然后會重新觸發(fā)這個離開的鉤子，

注意：此時會重新觸發(fā)執(zhí)行這個鉤子，而不是在這個鉤子函數(shù)繼續(xù)執(zhí)行的

當(dāng)重新觸發(fā)后就會繼續(xù)執(zhí)行next(’/home’)所以會一直循環(huán)。

至于解決辦法就是判斷下，如果已經(jīng)是/home了就next()。

解釋2

為什么next()指定路徑會出現(xiàn)死循環(huán)

router.beforeEach((to, from, next) => {
  console.log('beforeEach');
  if(true){
    next('/');
  }else{
    next();
 }
});

next()直接跳轉(zhuǎn)到to.path路徑，沒有再執(zhí)行一遍beforeEach導(dǎo)航鉤子，next(’/’)或者next(’/login’)自己指定路徑的，路由跳轉(zhuǎn)的時候還執(zhí)行一遍beforeEach導(dǎo)航鉤子，所以上面出現(xiàn)死循環(huán)；

栗子：

如我們登錄頁（’/login’）面進入首頁(’/’)，可以這么寫：

router.beforeEach((to, from, next) => {
var userInfo= JSON. parse(sess ionStorage. getItem('userInfoStorage'));//獲取瀏覽器緩存的用戶信息
if(userInfo){//如果有就直接到首頁咯
next() ;
}else{
if(to. path==' /login' ){//如果是登錄頁面路徑，就直接next()
next() ;
}else{//不然就跳轉(zhuǎn)到登錄;
next(' /login');
}
}
});

問題

出現(xiàn)無限循環(huán)是因為之前我沒有弄清楚next()流程

因為每次跳轉(zhuǎn)到一個路由的時候都會觸發(fā) 全局守衛(wèi) 由于判斷條件未改變所以一直循環(huán)

解決方法

判斷to路由的meta (isRequireAuthTrue)是否為true

判斷是否登陸(isLogin)

// ('/')為登陸界面  
// next() 默認(rèn)跳轉(zhuǎn)to的path
if(isRequireAuthTrue){
    if(isLogin){
      console.log('導(dǎo)航守衛(wèi)保護');
      next(); //成功則跳轉(zhuǎn)
    }else {
      console.log('你還沒有登陸!');
      next({path:'/'}) //失敗則跳轉(zhuǎn)到登陸頁面
    }
  }else {
    next();//不需要導(dǎo)航守衛(wèi)的則直接next跳轉(zhuǎn)
  }

解釋3

問題描述

在調(diào)用Vue中的全局前置導(dǎo)航守衛(wèi)beforeEach(to, from, next)中的next函數(shù)，在給next()傳參數(shù)的時候出現(xiàn)死循環(huán)的問題！

導(dǎo)致問題原因

其實導(dǎo)致這個問題的根本是沒有完全理解beforeEach()和next("/somewhere")的作用首先，我們來看看next()的用法

究其根本是當(dāng)執(zhí)行了next("/somewhere")的時候又觸發(fā)了beforeEach()這個鉤子，所以就變成了無限死循環(huán)！

解決辦法

router.beforeEach((to, from, next) => {
    let {path} = to;
    if(path=== "/somewhere") {
        next(); // 導(dǎo)航目的地符合預(yù)期，繼續(xù)后續(xù)事情
     }else {
        next("/somewhere");  
        // 導(dǎo)航目的地不符合預(yù)期，重新路由新路徑地址，然后會再次觸發(fā)beforeEach鉤子并進行二次判斷
    }
});

解釋4

頁面跳墻中使用 vue-router中的 beforeEach的死循環(huán)問題

問題展現(xiàn)

import Router from 'vue-router'
const router = new Router({
    {path: '/', component: index },
    {path: '/login', component: login},
    {path: '/error', component: error},
    {path: '*', component: error}
})

router.beforeEach((to, from, next) => {
    const isLogin = sessionStorage.getItem('loginData')
    if (isLogin) {
        next()
    } else {
        next('/error')
    } 
})

最近在使用時，一直陷入死循環(huán)，當(dāng)時的想法是如何將路由提取出來，脫離beforeEach的控制，之后發(fā)現(xiàn)不可行。

上面問題再現(xiàn)，會出現(xiàn)死循環(huán)，因為 /error 會在進入前又要進入beforeEach中，這樣就會一直循環(huán)下去

所以就是想如何跳出這個循環(huán)即可

router.beforeEach((to, from, next) => {
    const isLogin = sessionStorage.getItem('loginData')
    if (isLogin) {
        next()
    } else {
        //next('/error')
        if (to.path === '/error') { //這就是跳出循環(huán)的關(guān)鍵
           next()
        } else {
            next('/error')
        }
    } 
})

這樣寫，其實這個會執(zhí)行兩次，第二次進來是以/error的路由進來的