Router路由守卫

缓存路由组件

切换路由之后，之前展示的组件不被销毁

<keep-alive include="需要被缓存的组件名">
	<router-view></router-view>
</keep-alive>

< keep-alive >是Vue的一个内部组件，适合用来缓存不需要实时更新的组件，这样可以保留组件状态，避免重新渲染。
keep-alive是一个缓存的机制，keep-alive要配合router-view使用
缓存多个：

<keep-alive :include="['组件名1','组件名2']">

参数：
include ：接受字符串或正则表达式，需要被缓存的组件名
exclude ：接受字符串或正则表达式，不需要缓存的组件名
max ：接受数字，最多可以缓存多少组件实例

生命周期钩子

路由组件所独有的两个钩子，用于捕获路由组件的激活状态。
activated：聚集/激活时
deactivated：失焦时
与data同级

全局路由守卫

// 每一次切换路由前执行
router.beforeEach((to,from,next) => {
    // 只有token存在的时候,才进行跳转
    let token = localStorage.getItem("token");
    if(token || to.path === '/'){
        next();     // 放行, 允许跳转
    }else{
        next('/');  // 跳转到登录页
    }
}) 
// 回调函数中必须要使用 to 和 next, 否则会报错 
// RangeError: Maximum call stack size exceeded

to：要去的组件
from：所在组件
next：跳转

{
     path:'video',
     name:'video',
     component:VideoManage,
     meta:{isAuth:true}		// 在需要权限校验的组件上, 在meta属性中添加一个字段用于判断
}

router.beforeEach((to,from,next) => {
    if(to.meta.isAuth){     // 如果要去的组件需要校验
        // 进行校验
    }else{
        next();
    }
})

// 后置路由守卫
// 每次路由切换后执行
router.afterEach((to,from) => {
        ...... 
})

独享路由守卫

某一个路由所独享的
只有前置

   {
        path:'video',
        name:'video',
        component:VideoManage,
        meta:{isAuth:true},
        beforeEnter:(to,from,next) => {
            
        }
   }

组件内路由守卫

如果直接用this是值不到的;因为beforeRouteEnter是在mounted前执行

  //通过路由规则, 进入组件前
  beforeRouteEnter(to,from,next){

  },
  //通过路由规则, 离开组件前
  beforeRouteLeave(to,from,next){

  }

和 data 同级

路由器的两种工作模式

对于一个 url 来说，hash值是：#及其后面的所有内容
hash值不会包含在HTTP请求中，不会发给服务器
这种就是hash模式：http://202.193.53.155/#/login

hash模式：地址栏中带有#号的，兼容性好
history模式：地址栏干净美观，但是部署上线时需要后端人员支持，解决刷新页面服务端404的问题。