vue-router使用next()跳轉到指定路徑時會無限迴圈
阿新 • • 發佈:2018-12-07
我在路由為 /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()。