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()。




免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM