1. 程式人生 > >vue-router使用next()跳轉到指定路徑時會無限迴圈

vue-router使用next()跳轉到指定路徑時會無限迴圈

我在路由為 /path 的頁面這樣寫

複製程式碼

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

複製程式碼

這個是元件路由,我想實現的效果是在這個頁面點選瀏覽器的返回按鈕後要返回 /home頁面而不是上一個頁面,上面的程式碼是沒問題的,而我之前的寫法就一直死迴圈

// 下面的寫法會死迴圈
     beforeRouteLeave (to, from, next) {
        console.log('離開路路由')
       next('/home')
}
我不太明白為什麼會死迴圈,我在home頁面也沒有寫任何鉤子函式來跳到result頁面啊,我也沒有寫全域性的beforeEach鉤子函式。
上面第一段程式碼是可用的,自己瞎摸索出來的,但是不是很明白為什麼要加那個判斷?

後來經過查閱資料得知vue-router的next()方法無參和有參時是不一樣的

現在,算是大致理解了,當執行鉤子函式時如果遇到next('/home')等時會中斷當前導航,
比如當前導航是去/a,那麼遇到next('/home')後就會把to.path改為/home,然後會重新觸發這個離開的鉤子,
注意:此時會重新觸發執行這個鉤子,而不是在這個鉤子函式繼續執行的,之前是一直沒理解這裡,
以為是執行next('/home')後就會直接跳到home頁面呢,當重新觸發後就會繼續執行next('/home')所以會一直迴圈
。至於解決辦法就是判斷下,如果已經是/home了就next()。