第一次认识路由守卫：之前我做过的小项目里面，我们直接在浏览器网址的地方进行修改就能跳转页面，这是不安全的，因此就需要路由守卫，实现通过路由拦截，来判断用户是否登录，该页面用户是否有权限浏览，避免非法登录。
路由守卫的概念：路由守卫也叫导航守卫，路由拦截。
路由守卫分为三类：
1.全局导航守卫
1.全局前置守卫，路由跳转之前执行：router.beforeEach(to，from，next)
2.全局解析守卫：router.beforeResolve
3.全局后置守卫，路由跳转之后执行：router.afterEach((to,from){ 条件代码 }）
2.路由独享守卫：
beforeEnter:(to,from,next){ 条件代码 }
3.组件内守卫
1.组件内的前置守卫： beforeRouteEnter((to,from,next)=>{})
2.组件内的后置守卫： beforeRouteLeave (to,from,next){ 条件代码 }
3.组件内的更新守卫：beforeRouteUpdate ( to,from,next ){}
全局导航守卫-全局前置守卫（常用）：router.beforeEach(to，from，next)
router.beforeEach((to,from,next)=>{
console.log(to);
console.log(from);
next()
})
路由发生变化就会调用beforeEach函数。其中参数to指向下一个路由（即将跳到的路由），from指向下一个路由（跳转之前的原页面），next为一个方法，并且一定要调用
next需要注意的地方：
1.但凡涉及到有next参数的钩子，必须调用next() 才能继续往下执行下一个钩子，否则路由跳转会停止。
2.next(false)。中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到from路由对应的地址。主要用于登录验证不通过的处理。
3.next(‘/’) 或者 next({ path: ‘/’ }) : 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。可以向next中传递任意位置的对象。
4.next(error): (v2.4.0+) ：如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。
5.在beforeRouteEnter钩子中next((vm)=>{})内接收的回调函数参数为当前组件的实例vm，这个回调函数在生命周期mounted之后调用，也就是，他是所有导航守卫和生命周期函数最后执行的那个钩子。
Original: https://blog.csdn.net/weixin_44226391/article/details/127637378
Author: 神也畏惧小卢
Title: 什么是路由守卫？
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/711065/
转载文章受原作者版权保护。转载请注明原作者出处！