路由守卫分为三种:1、全局守卫 2、路由独享守卫 3、组件内部生命周期守卫
1、全局守卫
每当浏览器地址发生变化时,路由都会去检测是否匹配。无论进入哪个路由,都会触发全局守卫的钩子函数。
全局守卫对应有三个钩子函数:
全局前置钩子 router.beforeEach(callback);
全局解析钩子router.beforeResolve(callback);
全局后置钩子router.afterEach(callback)。
解析:
router.beforeEach(callback) 进入路由时就触发这个钩子,回调函数对应三个形参,第一个参数和第二个参数表示路由信息对象 ,就跟this.$route是一样的。第一个参数是进入的这个路由的信息,第二个参数则是从那个路由过来的那个路由的信息;第三个参数表示去匹配路由然后加载组件,只有调用了这个参数才会去加载路由配置的组件。
这个钩子一般用于一些页面判断用户是否登录,如果没有登录,第三个参数就去匹配登录的路由并加载对应的组件,如果登录了就直接加载当前路由的组件。
在路由配置文件中,代码展现:
router.beforeEach(function(to, from, next) {
//如果是购物车或者个人信息页面需要判断是否登录
if (to.path == "/car"||to.path=="/info") {
//通过本地缓存做一个假数据,判断是否登录
var islogin=window.localStorage.getItem("islogin")
if(islogin=="ok"){
//取得的值为OK时,就加载当前组件
next()
}else{
//否则就是未登录,直接匹配登录的路由并加载组件
next("/login")
}
} else {
//当前路由不需要登录就直接加载组件
next() //去匹配路由然后加载组件
}
})
router.beforeResolve(callback) 当路由匹配完毕时触发,callback回调函数的参数也是和beforeEach的参数是一样的,用于初始化组件。
router.afterEach(callback) 与前两个钩子有一个很大的区别,后置钩子没有第三个参数next,用于组件加载后的一些操作。一般用于路由跳转以后用window把窗口调上去,因为vue的项目是一个单页应用。路由切换时并不会改变改变body。
2、路由独享守卫
路由独立守卫beforeEnter:(to,from,next)=>{}是写在路由配置项内的,写在那个路由中只会进入该路由时触发,代码演示:
{
path: '/home',
name: 'home',
component: () => import("../views/home/index.vue"),
beforeEnter(to,from,next){
console.log("beforeEnter")
//加载组件
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
出发路由,预备从当前组件离开,判断路由变化,判断组件是否重用,判断新路由初始化,判断组件初始化,路由与组件初始化完毕,路由组件重定向完毕