這篇文章主要為大家展示了“Vue beforeRouteEnter中next執(zhí)行時(shí)機(jī)的示例分析”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Vue beforeRouteEnter中next執(zhí)行時(shí)機(jī)的示例分析”這篇文章吧。

創(chuàng)新互聯(lián)公司專注于華安企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站開發(fā),商城系統(tǒng)網(wǎng)站開發(fā)。華安網(wǎng)站建設(shè)公司,為華安等地區(qū)提供建站服務(wù)。全流程按需網(wǎng)站設(shè)計(jì)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

背景

在用vue實(shí)現(xiàn)界面的時(shí)候，想在beforeRouteEnter鉤子函數(shù)中去獲取數(shù)據(jù)，然后通過next方法設(shè)置到跳轉(zhuǎn)頁面的實(shí)例中，結(jié)果發(fā)現(xiàn)數(shù)據(jù)一直沒辦法在界面渲染的時(shí)候賦值，苦思不得其解，遂google之，終尋原因，記錄之。

注意

beforeRouteEnter (to, from, next) {
 console.log(this); //undefined，不能用this來獲取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周期之后

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

1、beforeRouteEnter(to, from, next){

要執(zhí)行的代碼操作

next();

}

beforeRouteEnter：進(jìn)入路由之前執(zhí)行的函數(shù)。

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

2、beforeRouteLeave(to, from, next){

要執(zhí)行的代碼操作

next();

}

beforeRouteLeave：離開路由之前執(zhí)行的函數(shù)。

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

以上是“Vue beforeRouteEnter中next執(zhí)行時(shí)機(jī)的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享文章：VuebeforeRouteEnter中next執(zhí)行時(shí)機(jī)的示例分析
路徑分享：http://newbst.com/article12/jhcjdc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、全網(wǎng)營銷推廣、企業(yè)建站、用戶體驗(yàn)、網(wǎng)站內(nèi)鏈、

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)