快捷導(dǎo)航

詳解vue-router 2.0 常用基礎(chǔ)知識(shí)點(diǎn)之導(dǎo)航鉤子

更新時(shí)間：2017年05月10日 11:29:11 作者：NowTheFuture

本篇文章主要介紹了vue-router 2.0 常用基礎(chǔ)知識(shí)點(diǎn)之導(dǎo)航鉤子，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

導(dǎo)航鉤子

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ù)：

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)航。

確保要調(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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue-cli3全面配置詳解
這篇文章主要介紹了vue-cli3全面配置詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-11-11
vue中keepAlive組件的作用和使用方法詳解
vue里提供了keep-alive組件用來(lái)緩存狀態(tài),這篇文章主要給大家介紹了關(guān)于vue中keepAlive組件的作用和使用方法的相關(guān)資料,需要的朋友可以參考下
2021-07-07
詳解vuex中action何時(shí)完成以及如何正確調(diào)用dispatch的思考
這篇文章主要介紹了詳解vuex中action何時(shí)完成以及如何正確調(diào)用dispatch的思考，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-01-01
vue3(optionApi)使用Element Plus庫(kù)沒(méi)有效果的解決方式
這篇文章主要介紹了vue3(optionApi)使用Element Plus庫(kù)沒(méi)有效果的解決方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue ElementUI實(shí)現(xiàn)異步加載樹(shù)
這篇文章主要為大家詳細(xì)介紹了vue ElementUI實(shí)現(xiàn)異步加載樹(shù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-06-06
Vue.js下拉菜單組件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了Vue.js下拉菜單組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-10-10
vue3 pinia踩坑及解決方案詳解
這篇文章主要為大家介紹了vue3 pinia踩坑及解決方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
vue使用swiper插件實(shí)現(xiàn)輪播圖的示例
這篇文章主要介紹了vue使用swiper插件實(shí)現(xiàn)輪播圖的示例，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下
2021-05-05
Vue中如何使用Map鍵值對(duì)傳參詳析
最近在做一個(gè)vue的項(xiàng)目,碰到一點(diǎn)關(guān)于Map鍵值對(duì)傳參的問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于Vue中如何使用Map鍵值對(duì)傳參的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-08-08
VUE跨域問(wèn)題Access to XMLHttpRequest at
今天發(fā)現(xiàn)一個(gè)錯(cuò)誤，VUE發(fā)送請(qǐng)求的時(shí)候不能請(qǐng)求到正確數(shù)據(jù)，VUE跨域問(wèn)題Access to XMLHttpRequest at，本文就詳細(xì)的來(lái)介紹一下解決方法，感興趣的可以了解一下
2022-05-05