vue-router 導(dǎo)航鉤子的具體使用方法

更新時(shí)間：2017年08月31日 11:12:38 作者：Lizzy0077

本篇文章主要介紹了vue-router 導(dǎo)航鉤子的具體使用方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

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)航正要離開的路由
next: Function: 一定要調(diào)用該方法來(lái) resolve 這個(gè)鉤子。執(zhí)行效果依賴 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;
  });
 }
})

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue-cli創(chuàng)建項(xiàng)目時(shí)由esLint校驗(yàn)導(dǎo)致報(bào)錯(cuò)或警告的問題及解決
這篇文章主要介紹了vue-cli創(chuàng)建項(xiàng)目時(shí)由esLint校驗(yàn)導(dǎo)致報(bào)錯(cuò)或警告的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-05-05
vue實(shí)現(xiàn)微信獲取用戶信息的方法
這篇文章主要介紹了vue實(shí)現(xiàn)微信獲取用戶信息的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-03-03
Vue input控件通過(guò)value綁定動(dòng)態(tài)屬性及修飾符的方法
這篇文章主要介紹了 Vue input控件通過(guò)value綁定動(dòng)態(tài)屬性及修飾符的方法,需要的朋友可以參考下
2017-05-05
vue中實(shí)現(xiàn)全屏以及對(duì)退出全屏的監(jiān)聽
本文主要介紹了vue中實(shí)現(xiàn)全屏以及對(duì)退出全屏的監(jiān)聽，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-07-07
去掉vue 中的代碼規(guī)范檢測(cè)兩種方法(Eslint驗(yàn)證)
我們?cè)谑褂胿ue 腳手架時(shí)，為了規(guī)范團(tuán)隊(duì)的代碼格式，會(huì)有一個(gè)代碼規(guī)范檢測(cè)，如果不符合規(guī)范就會(huì)報(bào)錯(cuò)，有時(shí)候我們不想按照他的規(guī)范去寫。這時(shí)我們需要關(guān)閉,這里腳本之家小編給大家?guī)?lái)了去掉vue 中的代碼規(guī)范檢測(cè)兩種方法(Eslint驗(yàn)證)，一起看看吧
2018-03-03
Element ui table表格內(nèi)容超出隱藏顯示省略號(hào)問題
這篇文章主要介紹了Element ui table表格內(nèi)容超出隱藏顯示省略號(hào)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,
2023-11-11
使用jenkins一鍵打包發(fā)布vue項(xiàng)目的實(shí)現(xiàn)
這篇文章主要介紹了使用jenkins一鍵打包發(fā)布vue項(xiàng)目的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-05-05
vue組件引用另一個(gè)組件出現(xiàn)組件不顯示的問題及解決
這篇文章主要介紹了vue組件引用另一個(gè)組件出現(xiàn)組件不顯示的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vue.js中數(shù)組變動(dòng)的檢測(cè)詳解
這篇文章給大家主要介紹了Vue.js中數(shù)組變動(dòng)的檢測(cè)，文中給出了詳細(xì)的示例代碼和過(guò)程介紹，相信會(huì)對(duì)大家的理解和學(xué)習(xí)很有幫助，有需要的朋友們下面來(lái)一起看看吧。
2016-10-10
vue腳手架創(chuàng)建項(xiàng)目時(shí)報(bào)catch錯(cuò)誤及解決
這篇文章主要介紹了vue腳手架創(chuàng)建項(xiàng)目時(shí)報(bào)catch錯(cuò)誤及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-01-01