對Vue beforeRouteEnter 的next執(zhí)行時機詳解
背景
今天在用vue實現(xiàn)界面的時候，想在beforeRouteEnter鉤子函數(shù)中去獲取數(shù)據(jù)，然后通過next方法設(shè)置到跳轉(zhuǎn)頁面的實例中，結(jié)果發(fā)現(xiàn)數(shù)據(jù)一直沒辦法在界面渲染的時候賦值，苦思不得其解，遂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') })
這個里面的代碼很晚執(zhí)行，執(zhí)行時機在組件mounted周期之后
拓展知識：對vue中的beforeRouteEnter()和beforeRouteLeave()的函數(shù)解釋
1、beforeRouteEnter(to, from, next){
要執(zhí)行的代碼操作
next();
}
beforeRouteEnter：進入路由之前執(zhí)行的函數(shù)。
next(); --》 必須有這個，相當(dāng)于一個按鈕開啟一樣。
2、beforeRouteLeave(to, from, next){
要執(zhí)行的代碼操作
next();
}
beforeRouteLeave：離開路由之前執(zhí)行的函數(shù)。
next(); --》 必須有這個，相當(dāng)于一個按鈕開啟一樣。
以上這篇對Vue beforeRouteEnter 的next執(zhí)行時機詳解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3-vite安裝后main.ts文件和tsconfig.app.json文件報錯解決辦法
Vue.js是一個流行的JavaScript框架,它可以幫助開發(fā)者構(gòu)建交互式Web應(yīng)用程序,這篇文章主要給大家介紹了關(guān)于vue3-vite安裝后main.ts文件和tsconfig.app.json文件報錯解決辦法,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了通過vue手動封裝on，emit，off的代碼詳解，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
這篇文章主要為大家詳細介紹了Vue實現(xiàn)學(xué)生管理功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要介紹了vue?雙向綁定問題$emit無效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
動態(tài)路由,動態(tài)即不是寫死的,是可變的,下面這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)動態(tài)路由的詳細代碼示例,文中通過圖文以及代碼介紹的非常詳細,需要的朋友可以參考下2024-01-01
我們使用nginx部署Vue項目,實質(zhì)上就是將Vue項目打包后的內(nèi)容同步到nginx指向的文件夾,下面這篇文章主要給大家介紹了關(guān)于nginx+vite項目打包以及部署的相關(guān)資料,需要的朋友可以參考下2023-01-01
vue模態(tài)框?qū)崿F(xiàn)動態(tài)錨點
這篇文章主要為大家詳細介紹了vue模態(tài)框?qū)崿F(xiàn)動態(tài)錨點，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了vue?vue-esign簽字板的實例講解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue導(dǎo)出excel的兩種實現(xiàn)方式代碼
這篇文章主要給大家介紹了關(guān)于vue導(dǎo)出excel的兩種實現(xiàn)方式,在項目中我們可能會碰到導(dǎo)出Excel文件的需求,文中給出了詳細的代碼示例,需要的朋友可以參考下2023-08-08
如何使用elementUI組件實現(xiàn)表格的分頁及搜索功能
最近在使用element-ui的表格組件時,遇到了搜索框功能的實現(xiàn)問題,這篇文章主要給大家介紹了關(guān)于如何使用elementUI組件實現(xiàn)表格的分頁及搜索功能的相關(guān)資料,需要的朋友可以參考下2023-03-03