這篇文章主要介紹vue-router導(dǎo)航鉤子怎么用，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)公司專(zhuān)注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、周至網(wǎng)絡(luò)推廣、小程序開(kāi)發(fā)、周至網(wǎng)絡(luò)營(yíng)銷(xiāo)、周至企業(yè)策劃、周至品牌公關(guān)、搜索引擎seo、人物專(zhuān)訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供周至建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18982081108，官方網(wǎng)址：www.cdcxhl.com

vue-router 提供的導(dǎo)航鉤子主要用來(lái)攔截導(dǎo)航，讓它完成跳轉(zhuǎn)或取消。

全局鉤子

1、router.beforeEach 注冊(cè)一個(gè)全局的 before 鉤子：

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
 // ...
})

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

• to: Route: 即將要進(jìn)入的目標(biāo) 路由對(duì)象

• from: Route: 當(dāng)前導(dǎo)航正要離開(kāi)的路由

• next: Function: 一定要調(diào)用該方法來(lái) resolve 這個(gè)鉤子。執(zhí)行效果依賴(lài) next 方法的調(diào)用參數(shù)。

next(): 進(jìn)行管道中的下一個(gè)鉤子。如果全部鉤子執(zhí)行完了，則導(dǎo)航的狀態(tài)就是 confirmed （確認(rèn)的）。

next(false): 中斷當(dāng)前的導(dǎo)航。如果瀏覽器的 URL 改變了（可能是用戶手動(dòng)或者瀏覽器后退按鈕），那么 URL 地址會(huì)重置到 from 路由對(duì)應(yīng)的地址。

next('/') 或者 next({ path: '/' }): 跳轉(zhuǎn)到一個(gè)不同的地址。當(dāng)前的導(dǎo)航被中斷，然后進(jìn)行一個(gè)新的導(dǎo)航。

2.afterEach同理，只是不用傳入next函數(shù)

示例：一個(gè)單頁(yè)面應(yīng)用，返回首頁(yè)時(shí)，保存其在首頁(yè)的瀏覽位置。并且給每一個(gè)頁(yè)面title賦值

const router = new VueRouter({
 base: __dirname,
 routes
});

new Vue({ // eslint-disable-line
 el: '#app',
 render: h => h(App),
 router
});

let indexScrollTop = 0;
router.beforeEach((route, redirect, next) => {
 if (route.path !== '/') {
  indexScrollTop = document.body.scrollTop;
 }
 document.title = route.meta.title || document.title;
 next();
});

router.afterEach(route => {
 if (route.path !== '/') {
  document.body.scrollTop = 0;
 } else {
  Vue.nextTick(() => {
   document.body.scrollTop = indexScrollTop;
  });
 }
})

以上是“vue-router導(dǎo)航鉤子怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！