基于Vue2.X中路由和鉤子函數(shù)的示例分析-創(chuàng)新互聯(lián)
小編給大家分享一下基于Vue2.X中路由和鉤子函數(shù)的示例分析，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
導(dǎo)航和鉤子函數(shù)：
導(dǎo)航：路由正在發(fā)生改變 關(guān)鍵字：路由 變
鉤子函數(shù)：在路由切換的不同階段調(diào)用不同的節(jié)點(diǎn)函數(shù)（鉤子函數(shù)在我看來也就是：某個節(jié)點(diǎn)和時機(jī)觸發(fā)的函數(shù)）。
鉤子函數(shù) 主要用來攔截導(dǎo)航，讓它完成跳轉(zhuǎn)或取消，在導(dǎo)航的不同階段來執(zhí)行不同的函數(shù) ，最后鉤子函數(shù)的執(zhí)行結(jié)果會告訴導(dǎo)航怎么做。。
導(dǎo)航在所有鉤子 resolve 完之前一直處于 等待中，等待鉤子函數(shù)告訴它下一步該怎么做。用next()來指定。
我來給大家舉個登陸的例子
router.beforeEach(({meta, path}, from, next) => {
const {auth = true} = meta // meta代表的是to中的meta對象，path代表的是to中的path對象
var isLogin = Boolean(store.state.user.id) // true用戶已登錄， false用戶未登錄
if (auth && !isLogin && path !== '/login') { // auth 代表需要通過用戶身份驗(yàn)證，默認(rèn)為true，代表需要被驗(yàn)證， false為不用檢驗(yàn)
return next({ path: '/login' }) // 跳轉(zhuǎn)到login頁面
}
next() // 進(jìn)行下一個鉤子函數(shù)
})先說這個beforeEach的鉤子函數(shù)，它是一個全局的before 鉤子函數(shù)， （before each）意思是在 每次每一個路由改變的時候都得執(zhí)行一遍。
它的三個參數(shù)：
to: (Route路由對象) 即將要進(jìn)入的目標(biāo) 路由對象 to對象下面的屬性： path params query hash fullPath matched name meta（在matched下，但是本例可以直接用）
from: (Route路由對象) 當(dāng)前導(dǎo)航正要離開的路由
next: (Function函數(shù)) 一定要調(diào)用該方法來 resolve 這個鉤子。 調(diào)用方法：next(參數(shù)或者空) ***必須調(diào)用
next(無參數(shù)的時候): 進(jìn)行管道中的下一個鉤子，如果走到最后一個鉤子函數(shù)，那么 導(dǎo)航的狀態(tài)就是 confirmed （確認(rèn)的）
next('/') 或者 next({ path: '/' }): 跳轉(zhuǎn)到一個不同的地址。當(dāng)前的導(dǎo)航被中斷，然后進(jìn)行一個新的導(dǎo)航。
全局鉤子函數(shù)之 全局的afterEach鉤子：
after 鉤子沒有 next 方法，不能改變導(dǎo)航，代表已經(jīng)確定好了導(dǎo)航怎么去執(zhí)行后，附帶的一個執(zhí)行鉤子函數(shù)
組件內(nèi)的鉤子函數(shù)：（ beforeRouteEnter 和 beforeRouteLeave 再加一個 watch函數(shù) ）
vue2.X的組件內(nèi)鉤子函數(shù)比vue1.X減少了許多。。
使用組件自身的生命周期鉤子函數(shù)來替代 activate 和 deactivate
在 $router 上使用 watcher 來響應(yīng)路由改變
canActivate 可以被 router 的配置中的 beforeEnter 中實(shí)現(xiàn)
canDeactivate 已經(jīng)被 beforeRouteLeave 取代, 后者在一個組件的根級定義中指定。這個鉤子函數(shù)在調(diào)用時是將組件的實(shí)例作為其上下文的。
canReuse 已經(jīng)被移除，因其容易混淆且很少被用到。
用ajax獲取數(shù)據(jù)的data(to, from, next) 鉤子用組件內(nèi) beforeRouteEnter (to, from, next)來替代
看完了這篇文章，相信你對“基于Vue2.X中路由和鉤子函數(shù)的示例分析”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道，感謝各位的閱讀！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
名稱欄目：基于Vue2.X中路由和鉤子函數(shù)的示例分析-創(chuàng)新互聯(lián)
新聞來源：http://m.jiaotiyi.com/article/cdpcio.html