Vue2（路由守卫，路由器两种工作模式）

一、路由守卫

1. 作用：对路由进行权限控制
2. 分类：全局守卫、独享守卫、组件内守卫

1. 全局守卫

全局前置路由守卫

1. 每次路由切换之前被调用，初始化时被调用
2. beforeEach接收三个参数：to, from, next
3. 路由元信息meta，用于存放一些自定义属性

// src/router/index.js
...
routers:[
    {
        name: ,
        path: ,
        component；,
        meta：{
        isAuth:true,//意味着这个组件需要鉴权
    }
    }
]

router.beforeEach((to,from,next)=>{
    console.log('beforeEach',to,from)
    if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
        if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则
            next() //放行
        }else{
            alert('暂无权限查看')
        }
    }else{
        next() //放行
    }
})

全局后置路由守卫

1. 每次路由切换之后被调用，初始化时被调用
2. afterEach接收两个参数：to, from
3. 适用场景：不同模块显示不同的网页title，成功切换模块后，再修改网页title

router.afterEach((to,from)=>{
	console.log('afterEach',to,from)
	if(to.meta.title){ 
		document.title = to.meta.title //修改网页的title
	}else{
		document.title = 'vue_test'
	}
})

2. 独享守卫

1. 某一个路由单独享用的守卫
2. beforeEnter接收三个参数：to, from, next
3. 没有afterEnter，可以配合全局后置守卫使用

beforeEnter(to,from,next){
	console.log('beforeEnter',to,from)
	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
		if(localStorage.getItem('school') === 'atguigu'){
			next()
		}else{
			alert('暂无权限查看')
			// next({name:'guanyu'})
		}
	}else{
		next()
	}
}

3. 组件内守卫

1. 将守卫写在组件内，而不是路由器index.js里
2. beforeRouteEnter（通过路由规则进入）接收三个参数：to, from, next，通过路由规则，进入该组件时被调用，相当于前置守卫，to为当前组件
3. beforeRouteLeave（通过路由规则离开）接收三个参数：to, from, next，通过路由规则，离开该组件时被调用，from为当前组件

beforeRouteEnter (to, from, next) {},
beforeRouteLeave (to, from, next) {}

二、路由器的两种工作模式

1. hash模式

1. 地址栏的# 以及后面的内容
2. hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。
3. hash模式：
   • 地址中永远带着#号，不美观 。
   • 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
   • 兼容性较好。
4. 路由器默认时hash模式

2. history模式

在创建路由规则的地方更改mode属性

const router = new VueRouter({
    mode:'history',
    routers:[...]
})

1. 地址干净，美观 。
2. 兼容性和hash模式相比略差。
3. 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。