快捷導(dǎo)航

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

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

本篇文章主要介紹了vue-router 導(dǎo)航鉤子的具體使用方法，小編覺(jué)得挺不錯(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)航正要離開(kāi)的路由
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中resetFields重置初始值不生效的原因詳解
resetFields 對(duì)整個(gè)表單進(jìn)行重置,將所有字段值重置為空并移除校驗(yàn)結(jié)果,下面這篇文章主要給大家介紹了關(guān)于vue中resetFields重置初始值不生效的原因的相關(guān)資料,需要的朋友可以參考下
2023-03-03
JavaScript獲取echart曲線上任意點(diǎn)位的值詳解
這篇文章主要為大家介紹了JavaScript獲取echart曲線上任意點(diǎn)位的值詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
vue+echarts實(shí)現(xiàn)動(dòng)態(tài)折線圖的方法與注意
這篇文章主要給大家介紹了關(guān)于vue+echarts實(shí)現(xiàn)動(dòng)態(tài)折線圖的方法與注意事項(xiàng)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-09-09
vue router帶參數(shù)頁(yè)面刷新或回退參數(shù)消失的解決方法
這篇文章主要介紹了vue router帶參數(shù)頁(yè)面刷新或回退參數(shù)消失的解決方法,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-02-02
教你使用vue-cli快速構(gòu)建的小說(shuō)閱讀器
這篇文章主要介紹了vue-cli構(gòu)建的小說(shuō)閱讀器，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-05-05
vue項(xiàng)目中mock.js的使用及基本用法
mockjs是用來(lái)模擬產(chǎn)生一些虛擬的數(shù)據(jù)，可以讓前端在后端接口還沒(méi)有開(kāi)發(fā)出來(lái)時(shí)獨(dú)立開(kāi)發(fā)。這篇文章主要介紹了vue項(xiàng)目中mock.js的使用,需要的朋友可以參考下
2019-05-05
巧妙運(yùn)用v-model實(shí)現(xiàn)父子組件傳值的方法示例
這篇文章主要介紹了巧妙運(yùn)用v-model實(shí)現(xiàn)父子組件傳值的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-04-04
Vue中的assets和static目錄:使用場(chǎng)景及區(qū)別說(shuō)明
這篇文章主要介紹了Vue中的assets和static目錄:使用場(chǎng)景及區(qū)別說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-06-06
vue實(shí)現(xiàn)自定義多選按鈕
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)自定義多選按鈕，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-07-07
Vue3 appear 失效的問(wèn)題及如何使用 appear
appear 是一個(gè)在元素默認(rèn)被顯示的情況下調(diào)用進(jìn)入動(dòng)畫(huà)效果,使得元素在這種初次渲染情況下執(zhí)行進(jìn)入動(dòng)畫(huà)的屬性,最近在學(xué)習(xí)vue3的動(dòng)畫(huà)時(shí)遇到appear無(wú)法生效的問(wèn)題,本文給大家詳細(xì)講解,感興趣的朋友一起看看吧
2023-10-10