vue2跟vue3的全局跟组件路由钩子的使用区别
在Vue 3中，组件路由钩子的使用方式与Vue 2类似，全局的钩子还是一样，不变
组件钩子，组件内钩子优点变化
- 使用组件选项（传统方式）：尽管你正在使用Vue 3，但你仍然可以像Vue 2一样，通过组件选项来使用路由钩子：
- 使用Composition API： Router 提供了onBeforeRouteLeave和onBeforeRouteUpdate这两个
- 确实需要在 setup() 中处理与 beforeRouteEnter 类似的逻辑，并且需要访问组件实例应该怎么做：watch监听路由
全局导航钩子
组件钩子
路由独享的钩子
全局导航钩子主要有两种钩子：前置守卫、后置钩子
const router = new VueRouter({ ... });
router.beforeEach((to, from, next) => {
// do someting
});
router.afterEach((to, from) => {
// do someting
});
//不同于前置守卫，后置钩子并没有 next 函数，也不会改变路由导航本身方向了
- 组建内的导航钩子
组件内的导航钩子主要有这三种：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。他们是直接在路由组件内部直接进行定义的
我们看一下他的具体用法：
const File = {
template: `<div>This is file</div>`,
beforeRouteEnter(to, from, next) {
// do someting
// beforeRouteEnter 不能获取组件实例 this，因为当守卫执行前，组件实例被没有被创建出来，剩下两个钩子则可以正常获取组件实例 this
// 但是并不意味着在 beforeRouteEnter 中无法访问组件实例，我们可以通过给 next 传入一个回调来访问组件实例，导航被确认是，会执行这个回调，
// 这时就可以访问组件实例了，如：在渲染该组件的对应路由被 confirm 前调用。如：
next (vm => {
let that = vm;
// 这里通过 vm 来访问组件实例解决了没有 this 的问题
})
},
beforeRouteUpdate(to, from, next) {
// do someting
// 在当前路由改变，但是依然渲染该组件是调用
},
beforeRouteUpdate(to, from, next) {
//在当前路由改变，但是该组件被复用时调用
//对于一个带有动态参数的路径 /good/:id，在 /good/1 和 /good/2 之间跳转的时候，
// 由于会渲染同样的good组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `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
// 导航离开该组件的对应路由时被调用
}
}
//注意，仅仅是 beforRouteEnter 支持给 next 传递回调，其他两个并不支持。
//因为归根结底，支持回调是为了解决 this 问题，而其他两个钩子的 this 可以正确访问到组件实例，所有没有必要使用回调
- 路由独享的钩子
顾名思义，即单个路由独享的导航钩子，它是在路由配置上直接进行定义的：
cont router = new VueRouter({
routes: [
{
path: '/file',
component: File,
beforeEnter: (to, from ,next) => {
// do someting
}
}
]
});
记法：除了全局的后置钩子是after:afterEach开头，其余的都是before开头：beforeEach、beforeRouteUpdate,beforeRouteLeave、beforeEnterbeforeRouteEnter,这些钩子作用是confirmed(确认的)导航的状态的，
vue路由当中的导航钩子中关于next()方法的理解
背景：你乘坐汽车从A景区想赶往B景区（模拟路由A跳转到路由B）
1.next()
进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是confirmed(确认的)。
你乘坐汽车要从A景区到B景区，路过关卡时，守门人拦下你，你量出了next()，守门人一看没问题，赶紧放行，于是你顺利到达了B景区。
2.next(false)
next( false )中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到from路由对应的地址。
如果你量出了next(false)，守门人立马关住大门，不让你走，哪都不让你去，你说想换个交通方式，走路或者坐飞机，都不行，老实待在A景区吧
3.next(’/’)
next( ’ / ‘)或者next({ paht：’ / ’ })：跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。可传递的参数可以是router-link标签中的to属性参数或router.push中的选项
你原本打算从A景区到B景区，但是走到关卡的时候由于某些原因改变了主意，想要去C景区，你对守门员量出了next({path:’/C’})，守门员一看，哦，原来你不去B了，要去C啊，去吧去吧，然后你顺利到达了C景区
4.next(error)
next( error )：如果传入next的参数是一个Error实例，则导航会被终止且该错误会被传递给router.onError()注册过的回调。
你在出发之前，给你妈妈说，妈，要是有什么事我立马通知你，你记得查看消息啊（你注册了router.onError()）走到中途，出现了意外，你发出next(error)，然后你妈就收到了消息，赶紧打电话问你怎么了（执行router.onError()里的回调）
网友评论