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