文章目录
- 路由守卫
- 1.全局路由守卫
- 2.组件内守卫
- 3.路由独享守卫
提示:以下是本篇文章正文内容,下面案例可供参考
路由守卫
全局守卫(3个) 路由独享守卫(1个) 组件的守卫(3个)
路由守卫的三个参数
to: 要跳到的目标路由
from: 从当前那个路由进行跳转
next: 不做任何阻拦 直接通行
1.全局路由守卫
全局前置守卫 全局后置守卫 全局解析守卫
1.全局前置守卫
在main.js中配置 在路由触发跳转时触发 主要用于登录验证 也就是路由还没跳转前提前告知
2.全局后置守卫
使用方式:main.js中配置,和beforeEach相反,它是在路由跳转完成后触发,它发生在beforeEach和beforeResolve之后,beforeRouteEnter(组件内守卫)之前。钩子不会接受next函数也不会改变导航本身
3.全局解析守卫
使用方式:main.js中配置,这个钩子和beforeEach类似,也是路由跳转前触发,区别是在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,即在 beforeEach 和 组件内beforeRouteEnter 之后,afterEach之前调用。
2.组件内守卫
组件内守卫有个三个:路由进入之前beforeRouteEnter,路由离开时beforeRouteLeave,页面更新时beforeRouteUpdate
1.beforeRouteEnter(to, from, next)
使用方式:在组件模板中使用,跟methods: {}等同级别书写,组件路由守卫是写在每个单独的vue文件里面的路由守卫
2 . beforeRouteUpdate(to, from, next)
使用方式:在组件模板中使用,跟methods: {}等同级别书写,组件路由守卫是写在每个单独的vue文件里面的路由守卫
- beforeRouteLeave(to, from, next)
使用方式:在组件模板中使用,跟methods: {}等同级别书写,组件路由守卫是写在每个单独的vue文件里面的路由守卫
3.路由独享守卫
路由独享守卫 beforeEnter(to, from, next)
使用方式:在router.js中使用,路由独享守卫是在路由配置页面单独给路由配置的一个守卫