vue2跟vue3的全局跟組件路由鉤子的使用區(qū)別
在Vue 3中，組件路由鉤子的使用方式與Vue 2類似，全局的鉤子還是一樣，不變
組件鉤子，組件內(nèi)鉤子優(yōu)點(diǎn)變化
- 使用組件選項(xiàng)（傳統(tǒng)方式）：盡管你正在使用Vue 3，但你仍然可以像Vue 2一樣，通過組件選項(xiàng)來使用路由鉤子：
- 使用Composition API： Router 提供了onBeforeRouteLeave和onBeforeRouteUpdate這兩個(gè)
- 確實(shí)需要在 setup() 中處理與 beforeRouteEnter 類似的邏輯，并且需要訪問組件實(shí)例應(yīng)該怎么做：watch監(jiān)聽路由
全局導(dǎo)航鉤子
組件鉤子
路由獨(dú)享的鉤子
全局導(dǎo)航鉤子主要有兩種鉤子：前置守衛(wèi)、后置鉤子
const router = new VueRouter({ ... });
router.beforeEach((to, from, next) => {
// do someting
});
router.afterEach((to, from) => {
// do someting
});
//不同于前置守衛(wèi)，后置鉤子并沒有 next 函數(shù)，也不會(huì)改變路由導(dǎo)航本身方向了
- 組建內(nèi)的導(dǎo)航鉤子
組件內(nèi)的導(dǎo)航鉤子主要有這三種：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。他們是直接在路由組件內(nèi)部直接進(jìn)行定義的
我們看一下他的具體用法：
const File = {
template: `<div>This is file</div>`,
beforeRouteEnter(to, from, next) {
// do someting
// beforeRouteEnter 不能獲取組件實(shí)例 this，因?yàn)楫?dāng)守衛(wèi)執(zhí)行前，組件實(shí)例被沒有被創(chuàng)建出來，剩下兩個(gè)鉤子則可以正常獲取組件實(shí)例 this
// 但是并不意味著在 beforeRouteEnter 中無法訪問組件實(shí)例，我們可以通過給 next 傳入一個(gè)回調(diào)來訪問組件實(shí)例，導(dǎo)航被確認(rèn)是，會(huì)執(zhí)行這個(gè)回調(diào)，
// 這時(shí)就可以訪問組件實(shí)例了，如：在渲染該組件的對(duì)應(yīng)路由被 confirm 前調(diào)用。如：
next (vm => {
let that = vm;
// 這里通過 vm 來訪問組件實(shí)例解決了沒有 this 的問題
})
},
beforeRouteUpdate(to, from, next) {
// do someting
// 在當(dāng)前路由改變，但是依然渲染該組件是調(diào)用
},
beforeRouteUpdate(to, from, next) {
//在當(dāng)前路由改變，但是該組件被復(fù)用時(shí)調(diào)用
//對(duì)于一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 /good/:id，在 /good/1 和 /good/2 之間跳轉(zhuǎn)的時(shí)候，
// 由于會(huì)渲染同樣的good組件，因此組件實(shí)例會(huì)被復(fù)用。而這個(gè)鉤子就會(huì)在這個(gè)情況下被調(diào)用。
// 可以訪問組件實(shí)例 `this`
console.log("****************Test1*******Update***********");
console.log(this, 'Update'); //當(dāng)前組件實(shí)例
console.log('to', to);
console.log('from', from);
console.log('next', next);
next();
}
beforeRouteLeave(to, from ,next) {
// do someting
// 導(dǎo)航離開該組件的對(duì)應(yīng)路由時(shí)被調(diào)用
}
}
//注意，僅僅是 beforRouteEnter 支持給 next 傳遞回調(diào)，其他兩個(gè)并不支持。
//因?yàn)闅w根結(jié)底，支持回調(diào)是為了解決 this 問題，而其他兩個(gè)鉤子的 this 可以正確訪問到組件實(shí)例，所有沒有必要使用回調(diào)
- 路由獨(dú)享的鉤子
顧名思義，即單個(gè)路由獨(dú)享的導(dǎo)航鉤子，它是在路由配置上直接進(jìn)行定義的：
cont router = new VueRouter({
routes: [
{
path: '/file',
component: File,
beforeEnter: (to, from ,next) => {
// do someting
}
}
]
});
記法：除了全局的后置鉤子是after:afterEach開頭，其余的都是before開頭：beforeEach、beforeRouteUpdate,beforeRouteLeave、beforeEnterbeforeRouteEnter,這些鉤子作用是confirmed(確認(rèn)的)導(dǎo)航的狀態(tài)的，
vue路由當(dāng)中的導(dǎo)航鉤子中關(guān)于next()方法的理解
背景：你乘坐汽車從A景區(qū)想趕往B景區(qū)（模擬路由A跳轉(zhuǎn)到路由B）
1.next()
進(jìn)行管道中的下一個(gè)鉤子。如果全部鉤子執(zhí)行完了，則導(dǎo)航的狀態(tài)就是confirmed(確認(rèn)的)。
你乘坐汽車要從A景區(qū)到B景區(qū)，路過關(guān)卡時(shí)，守門人攔下你，你量出了next()，守門人一看沒問題，趕緊放行，于是你順利到達(dá)了B景區(qū)。
2.next(false)
next( false )中斷當(dāng)前的導(dǎo)航。如果瀏覽器的 URL 改變了 (可能是用戶手動(dòng)或者瀏覽器后退按鈕)，那么 URL 地址會(huì)重置到from路由對(duì)應(yīng)的地址。
如果你量出了next(false)，守門人立馬關(guān)住大門，不讓你走，哪都不讓你去，你說想換個(gè)交通方式，走路或者坐飛機(jī)，都不行，老實(shí)待在A景區(qū)吧
3.next(’/’)
next( ’ / ‘)或者next({ paht：’ / ’ })：跳轉(zhuǎn)到一個(gè)不同的地址。當(dāng)前的導(dǎo)航被中斷，然后進(jìn)行一個(gè)新的導(dǎo)航?？蓚鬟f的參數(shù)可以是router-link標(biāo)簽中的to屬性參數(shù)或router.push中的選項(xiàng)
你原本打算從A景區(qū)到B景區(qū)，但是走到關(guān)卡的時(shí)候由于某些原因改變了主意，想要去C景區(qū)，你對(duì)守門員量出了next({path:’/C’})，守門員一看，哦，原來你不去B了，要去C啊，去吧去吧，然后你順利到達(dá)了C景區(qū)
4.next(error)
next( error )：如果傳入next的參數(shù)是一個(gè)Error實(shí)例，則導(dǎo)航會(huì)被終止且該錯(cuò)誤會(huì)被傳遞給router.onError()注冊(cè)過的回調(diào)。
你在出發(fā)之前，給你媽媽說，媽，要是有什么事我立馬通知你，你記得查看消息?。阕?cè)了router.onError()）走到中途，出現(xiàn)了意外，你發(fā)出next(error)，然后你媽就收到了消息，趕緊打電話問你怎么了（執(zhí)行router.onError()里的回調(diào)）
