路由守卫的三个参数是什么（路由守卫的三个参数是什么意思）



路由守卫分为三种：1、全局守卫  2、路由独享守卫  3、组件内部生命周期守卫

1、全局守卫

每当浏览器地址发生变化时，路由都会去检测是否匹配。无论进入哪个路由，都会触发全局守卫的钩子函数。

全局守卫对应有三个钩子函数：

全局前置钩子 router.beforeEach(callback)；

全局解析钩子router.beforeResolve(callback)；

全局后置钩子router.afterEach(callback)。

解析：

router.beforeEach(callback)  进入路由时就触发这个钩子，回调函数对应三个形参，第一个参数和第二个参数表示路由信息对象  ，就跟this.$route是一样的。第一个参数是进入的这个路由的信息，第二个参数则是从那个路由过来的那个路由的信息；第三个参数表示去匹配路由然后加载组件，只有调用了这个参数才会去加载路由配置的组件。

这个钩子一般用于一些页面判断用户是否登录，如果没有登录，第三个参数就去匹配登录的路由并加载对应的组件，如果登录了就直接加载当前路由的组件。

在路由配置文件中，代码展现：

router.beforeResolve(callback)  当路由匹配完毕时触发，callback回调函数的参数也是和beforeEach的参数是一样的，用于初始化组件。

router.afterEach(callback) 与前两个钩子有一个很大的区别，后置钩子没有第三个参数next，用于组件加载后的一些操作。一般用于路由跳转以后用window把窗口调上去，因为vue的项目是一个单页应用。路由切换时并不会改变改变body。

2、路由独享守卫 

路由独立守卫beforeEnter:(to,from,next)=>{}是写在路由配置项内的，写在那个路由中只会进入该路由时触发，代码演示：

3、组件内部生命周期守卫

顾名思义就是写在组件中的钩子，有三个钩子：beforeRouteLeave、beforeRouteEnter(to,from,next){}、beforeRouteUpdate(to,from,next){}

解析：

beforeRouteLeave 从该组件离开

beforeRouteEnter(to,from,next){}，组件被激活，使用不了this，故构造指定该next 可以接收一个回调函数接收当前vm 实例----路由传参获取参数，得到初始化数据

beforeRouteUpdate(to,from,next){}，组件重用时被调用----路由传参获取参数，避免增添watch 开销

总结

所有守卫的执行顺序：beforeRouteLeave 、beforeEach 、 beforeRouteUpdate 、beforeEnter 、 beforeRouteEnter 、 beforeResolve 、 afterEach

出发路由，预备从当前组件离开，判断路由变化，判断组件是否重用，判断新路由初始化，判断组件初始化，路由与组件初始化完毕，路由组件重定向完毕

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/jszy-jszl/13720.html