目录
一、编程式路由导航
1.作用
不借助<router-link>实现路由跳转，让路由跳转更加灵活
2.具体编码
//$router的两个API
this.$router.push({
name:'xiangqing',
query:{
id:m.id,
title:m.title
}
})
this.$router.replace({
name:'xiangqing',
query:{
id:m.id,
title:m.title
}
})
this.$router.back() //前进
this.$router.forward() //后退
this.$router.go() //可前进也可后退二、缓存路由组件
1.作用
让不展示的路由组件保持挂载，不被销毁
2.具体编码
<keep-alive include="News">
<router-view></router-view>
</keep-alive>注意：缓存多个组件时将 include 内容写成数组形式：
<keep-alive :include="['News','Message']">...</keep-alive>
三、两个新的生命周期钩子
1.作用
路由组件所独有的两个钩子，用于捕获路由组件的激活状态
2.具体名字
1. activated 路由组件被激活时触发
2. deactivated 路由组件失活时触发
四、路由守卫
1.作用
对路由进行权限控制
2.分类
全局守卫、独享守卫、组件内守卫
3.全局守卫
//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to,from,next)=>{
if(to.meta.isAuth){//判断当前路由是否需要进行权限控制
if(localStorage.getItem('school')==='xupt'){ //控制权限的具体规则
next() //放行
}else{
alert('学校名不对，无权限查看')
}
}else{
next()
}
})
//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from)=>{
document.title = to.meta.title || '学校系统' //修改网页的title
})
4.独享守卫
顾名思义，某一个路由所独享的路由守卫
beforeEnter: (to, from, next) => {
if(to.meta.isAuth){//判断是否需要鉴权
if(localStorage.getItem('school')==='xupt'){
next()
}else{
alert('学校名不对，无权限查看')
}
}else{
next()
}
}
5.组件内守卫
//进入守卫，通过路由规则，进入该组件时被调用
beforeRouteEnter(to, from, next) {
if (to.meta.isAuth) {
//判断是否需要鉴权
if (localStorage.getItem("school") === "xupt") {
next();
} else {
alert("学校名不对，无权限查看");
}
} else {
next();
}
},
//离开守卫，通过路由规则，离开该组件时被调用
beforeRouteLeave(to, from, next) {
next()
},五、路由器的两种工作模式
1.对于一个url来说，什么是hash值？
—— '#' 及其后面的内容就是 hash 值。
2. hash值不会包含在 HTTP 请求中
即：hash值不会带给服务器。
3. hash模式
1.地址中永远带着 # 号，不美观。
2.若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
3.兼容性较好。
4.history模式
1.地址干净，美观。
2.兼容性和hash模式相比略差。
3.应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。