路由守卫相关知识点

路由守卫分为三种：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

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