導(dǎo)航鉤子

我們提供的服務(wù)有：成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè)、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、眉縣ssl等。為成百上千家企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的眉縣網(wǎng)站制作公司

vue-router 提供的導(dǎo)航鉤子主要用來(lái)攔截導(dǎo)航，讓它完成跳轉(zhuǎn)或取消。有多種方式可以在路由導(dǎo)航發(fā)生時(shí)執(zhí)行鉤子：全局的, 單個(gè)路由獨(dú)享的, 或者組件級(jí)的。

全局鉤子

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
  // do something 
  next();
});

router.afterEach((to, from, next) => {
  console.log(to.path);
});

每個(gè)鉤子方法接收三個(gè)參數(shù)：

1. to: Route : 即將要進(jìn)入的目標(biāo) [路由對(duì)象]
2. from: Route : 當(dāng)前導(dǎo)航正要離開(kāi)的路由
3. next: Function : 一定要調(diào)用該方法來(lái) resolve 這個(gè)鉤子。執(zhí)行效果依賴 next

方法的調(diào)用參數(shù)。

1. next(): 進(jìn)行管道中的下一個(gè)鉤子。如果全部鉤子執(zhí)行完了，則導(dǎo)航的狀態(tài)就是confirmed （確認(rèn)的）。
2. next(false): 中斷當(dāng)前的導(dǎo)航。如果瀏覽器的 URL 改變了（可能是用戶手動(dòng)或者瀏覽器后退按鈕），那么 URL 地址會(huì)重置到 from
3. 路由對(duì)應(yīng)的地址。
4. next('/') 或者 next({ path: '/' }): 跳轉(zhuǎn)到一個(gè)不同的地址。當(dāng)前的導(dǎo)航被中斷，然后進(jìn)行一個(gè)新的導(dǎo)航。

確保要調(diào)用 next方法，否則鉤子就不會(huì)被 resolved。

組件內(nèi)的鉤子

let fromPath = '';
export default{
  beforeRouteEnter (to, from, next) {
     // 在渲染該組件的對(duì)應(yīng)路由被 confirm 前調(diào)用
     // 不！能！獲取組件實(shí)例 `this`
     // 因?yàn)楫?dāng)鉤子執(zhí)行前，組件實(shí)例還沒(méi)被創(chuàng)建
     fromPath = from.path;
     next();
  },
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。