vue路由（下）

九.编程式路由导航

1. 作用：不借助 实现路由跳转，让路由跳转更加灵活

2. 具体编码：

   //$router的两个API
   this.$router.push({
   	name:'xiangqing',
   		params:{
   			id:xxx,
   			title:xxx
   		}
   })
   
   this.$router.replace({
   	name:'xiangqing',
   		params:{
   			id:xxx,
   			title:xxx
   		}
   })
   this.$router.forward() //前进
   this.$router.back() //后退
   this.$router.go() //可前进也可后退
   

十.缓存路由组件
1.作用：让不展示的路由组件保持挂载，不被销毁。
2.具体编码：（include是包含的组件名字，name子组件export default下的name：‘News’，不写include就是都缓存，可以写数组）

<keep-alive include="News"> 
   <router-view></router-view>
</keep-alive>

十一.两个新的生命周期钩子
1.作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。
2.具体名字：
1.activated路由组件被激活时触发。2.deactivated路由组件失活时触发。
十二.路由守卫
1.作用：对路由进行权限控制
2.分类：全局守卫、独享守卫、组件内守卫
3.全局守卫:（to是跳转到的路由信息，form是来自那里跳转的路由信息。meta是路由元信息，用于程序员自定义信息，在配置上meta：{isAuth:false}）

//全局前置守卫：初始化时执行、每次路由切换前执行
router.beforeEach((to,from,next)=>{
	console.log('beforeEach',to,from)
	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
		if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则
			next() //放行
		}else{
			alert('暂无权限查看')
			// next({name:'guanyu'})
		}
	}else{
		next() //放行
	}
})

//全局后置守卫：初始化时执行、每次路由切换后执行
router.afterEach((to,from)=>{
	console.log('afterEach',to,from)
	if(to.meta.title){ 
		document.title = to.meta.title //修改网页的title
	}else{
		document.title = 'vue_test'
	}
})

4.独享守卫
独享守卫是给一个路由单独使用，只有“前置守卫”一个，但是可以和全局后置守卫配合使用。

{
	name:'xinwen',
	path:'news',
	component:News,
	meta:{isAuth:true,title:'新闻'},
	beforeEnter: (to, from, next) => {
		console.log('独享路由守卫',to,from)
		if(to.meta.isAuth){ //判断是否需要鉴权
			if(localStorage.getItem('school')==='atguigu'){
				next()
			}else{
				alert('学校名不对，无权限查看！')
			}
		}else{
			next()
		}
	}
},

5.组件内守卫（全局守卫和独享守卫都是在路由配置文件里面写，组件内守卫是在组件里面写），一般写组件独有的逻辑

//进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {
},
//离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {
}

十三.路由器的两种工作模式
1.对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。
2.hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。
3.hash模式：
1.地址中永远带着#号，不美观 。
2.若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
3.兼容性较好。
4.history模式：
1.地址干净，美观 。
2.兼容性和hash模式相比略差。
3.应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。
项目中通过mode:hash配置，默认还hash。