keeplive的使用

视图组件加载位置

	/**max最大缓存页面数*/
    <keep-alive max="5">
       /** 需要缓存的视图组件*/
        <router-view v-if="$route.meta.keepAlive" ></router-view>
     </keep-alive>
     /** 不需要缓存的视图组件 */
     <router-view v-if="!$route.meta.keepAlive"></router-view>

路由里

{
  path: 'index',
  name: 'index',
  component: () => import(/* webpackChunkName: 'home'*/"@/views/home/index/index.vue"),
 },//路由懒加载以及webpackChunk配置
 meta: {
  keepAlive: true,
  title: '首页'
 }
}

keep-alive的生命周期

activated： 页面第一次进入的时候，钩子触发的顺序是created->mounted->activated
deactivated:  页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activated

可以通过路由守卫动态更改缓存值得状态
vue-router提供了三个钩子，beforeRouterEnter、beforeRouterUpdate、beforeRouteLeave。
beforeRouterEnter（to,from,next){
　　next(vm=>{
　　　　
　　})
}