背景

今天在用vue實現界面的時候，想在beforeRouteEnter鉤子函數中去獲取數據，然后通過next方法設置到跳轉頁面的實例中，結果發現數據一直沒辦法在界面渲染的時候賦值，苦思不得其解，遂google之，終尋原因，記錄之。

注意

beforeRouteEnter (to, from, next) { console.log(this); //undefined，不能用this來獲取vue實例 console.log('組件路由鉤子：beforeRouteEnter'); next(vm => {  console.log(vm); //vm為vue的實例  console.log('組件路由鉤子beforeRouteEnter的next'); }); }

next(vm=>{console.log(‘next') }) 

這個里面的代碼很晚執行，執行時機在組件mounted周期之后

拓展知識：對vue中的beforeRouteEnter()和beforeRouteLeave()的函數解釋

1、beforeRouteEnter(to, from, next){

要執行的代碼操作

next();

}

beforeRouteEnter：進入路由之前執行的函數。

next();   --》 必須有這個，相當于一個按鈕開啟一樣。

2、beforeRouteLeave(to, from, next){

要執行的代碼操作

next();

}

beforeRouteLeave：離開路由之前執行的函數。

next();   --》 必須有這個，相當于一個按鈕開啟一樣。

以上這篇對Vue beforeRouteEnter 的next執行時機詳解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持錯新站長站。