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

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

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

導(dǎo)航鉤子

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

全局鉤子

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

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

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

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

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

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

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

組件內(nèi)的鉤子

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

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

您可能感興趣的文章:

相關(guān)文章

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