Vue 路由守卫
路由守卫分类:
1,全局守卫
指的是路由实例上直接操作的钩子函数。
特点是所有路由配置的组件都会触发。
-
- beforeEach (to, from, next) -- >注: 跳转前触发。
- beforeResolve (to, from, next) --> 注: 在beforeEach, beforeRouteEnter之后触发。
- afterEach (to, from, next) -->注: 跳转路由完成后触发。
2,路由守卫
指的是在单个路由配置的时候也可以设置的函数钩子。
-
- beforeEnter (to, from, next)
3, 组件守卫
指的是在组件内执行的钩子函数,类似于组件内生命周期,相当于为配置路由的组件添加的生命周期钩子函数。
-
- beforeRouteEnter (to, from, next) --> 注:beforeCreated 阶段触发,不能操作vm实例
- beforeRouteUpdate (to, from, next)
- beforeRouteLeave (to, from, next)
以上相关参数解释如下:
to :即将要进入的目标路由对象。
from : 即将要离开的路由对象。
next :涉及到next 参数的钩子函数,必须调用next 方法 来resolve 这个钩子,否则会中断在这,不会继续往下执行。
next():进行管道中的下一个钩子,如果全部执行完了,则导航的状态就是confirmed(确认的)。
next(false):中断当前的导航,如果浏览器的URL改变了(用户手动或浏览器后退),那么URL地址会重置到 from 路由对应的地址。
next(' / ')或者 next({path:' / '}):跳转到一个不同的地址,当前的导航被中断,然后进行一个新的导航,可传递参数可以是 router-link 标签中的 to 属性参数,或者 route.push 中选项。
next(error): 如果传入 next 参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError()注册过的回调。
深度思考,全面总结,综合发展!!