路由守卫

作用：对路由进行权限控制

分类：全局守卫，独享守卫，组件内守卫

全局守卫

全局守卫指路由实例上直接操作的钩子函数，其特点是所有路由配置中路由地址注册的组件都会触发。

全局前置钩子router.beforeEach((to, from, next) => {})，在路由跳转前触发，这个钩子作用主要是用于登录验证，也就是路由还没跳转提前告知。该钩子函数初始化时会被调用以及每次路由切换之前被调用。

1.to:即将要进入的目标路由对象（to是一个对象，是将要进入的路由对象，可以用to.path访问路由对象中的属性）

2.from: 当前正要离开的路由对象

3.next: 这是一个必须需要调用的方法，决定是否渲染路由地址的组件。执行next()，展示当前界面

window.localStorage.getItem("key")取出的value是字符串类型

router.beforeEach((to, from, next) => {
	//用户未登录只能访问首页、登录注册页面
	if (to.path == "/" || to.path == "/login" || to.path == "/register") {
		next();
	} else {
		//去其他页面判断是否登录
		let flag = window.localStorage.getItem("email");
		//登录过直接放行
		if (flag=='true') {
			next()
		} else {
			//未登录则跳转到首页
			next("/");
		}
	}
})

next('/') 或者 next({ path: '/' })表示跳转到一个该路由地址的组件。意思是当前的导航被中断，然后进行一个新的导航。可传递的参数与router.push中选项一致。

全局解析钩子router.beforeResolve(to,from,next)=>{})，组件初始化。路由匹配完毕时调用

全局后置钩子router.afterEach((to,from)=>{})，是路由跳转之后执行的事件，可以用作跳转路由后更改网页名以及路由跳转以后用window把窗口滚动到顶部。该钩子函数初始化时会被调用以及每次路由切换之后被调用。

1.to：将要进入的路由对象

2.from：当前正要离开的路由对象

//全局后置守卫
router.afterEach((to, from) => {
  window.scrollTo(0,0)
})

//首先路由地址注册时的meta需要配置title的名字
 {
        path: '/',
        name: 'Home',
        component: () => import('../views/Home.vue'),
        meta: {title:'主页' },
    },

//全局后置路由守卫
router.afterEach((to, from) => {
    document.title = to.meta.title || '默认名'    //修改网页的title
})

独享守卫

路由独享的守卫beforeEnter((to,from,next)=>{})，路由初始化但是组件未初始化。某一个路由所单独享用的路由守卫，独享路由守卫只有前置没有后置。

    {
        path: '/',
        name: 'Home',
        component: () => import('../views/Home.vue'),
        beforeEnter(to, from, next){
             if (localStorage.getItem('school') === 'jessicaland') {
                    next()  //放行
                } else {
                    alert('抱歉，您无权限查看！')
                }
            } 
        }

组件内守卫

直接写在.vue组件文件中

//通过路由规则，进入该组件时被调用
beforeRouteEnter(to,from,next) { if(localStorage.getTime('school')==='jessicaland'){
      next(vm=>{
            alert("hello" + vm.name);
        })
    }else{
      alert('学校名不对，无权限查看！')
    }
  
},
 
//通过路由规则，离开该组件时被调用 
beforeRouteLeave(to,from,next) {
 next();
 next(false);//进制跳转，留在当前页面。
}

beforeRouteEnter(to,from,next){}，组件被激活，使用不了this，故构造指定该next 可以接收一个回调函数接收当前vm 实例

beforeRouteUpdate(to,from,next){}，在当前路由改变时，并且该组件被复用时调用，可以通过this访问实例。比如对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，组件实例会被复用，该守卫会被调用。

导航守卫执行顺序

当点击切换路由时，beforeRouterLeave-->beforeEach-->beforeRouteUpdate-->beforeEnter-->beforeRouteEnter-->beforeResolve-->afterEach-->beforeCreate-->created-->beforeMount-->mounted-->beforeRouteEnter的next的回调

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