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