keep-alive的应用场景
keep-alive是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。
在vue 2.1.0 版本之后,keep-alive新加入了两个属性: include(包含的组件缓存) 与 exclude(排除的组件不缓存,优先级大于include) 。
 
如果未使用keep-alive组件,则在页面回退时仍然会重新渲染页面,触发created钩子,使用体验不好。 在以下场景中使用keep-alive组件会显著提高用户体验,菜单存在多级关系,多见于列表页+详情页的场景如
  • 商品列表页点击商品跳转到商品详情,返回后仍显示原有信息
  • 订单列表跳转到订单详情,返回,等等场景。
<keep-alive include='include_components' exclude='exclude_components'>
    <component>
        <!-- 该组件是否缓存取决于include和exclude属性 --> 
    </component>
</keep-alive>

 参数解释
  include - 字符串或正则表达式,只有名称匹配的组件会被缓存
  exclude - 字符串或正则表达式,任何名称匹配的组件都不会被缓存
  include 和 exclude 的属性允许组件有条件地缓存。二者都可以用“,”分隔字符串、正则表达式、数组。当使用正则或者是数组时,要记得使用v-bind 。 

 使用示例:
<!-- 逗号分隔字符串,只有组件a与b被缓存。 -->
    <keep-alive include="a,b">
      <component></component>
    </keep-alive>
    
    <!-- 正则表达式 (需要使用 v-bind,符合匹配规则的都会被缓存) -->
    <keep-alive :include="/a|b/">
      <component></component>
    </keep-alive>
    
    <!-- Array (需要使用 v-bind,被包含的都会被缓存) -->
    <keep-alive :include="['a', 'b']">
      <component></component>
    </keep-alive>

 

 
keep-alive的生命周期
  • 初次进入时:created > mounted > activated;退出后触发 deactivated
  • 再次进入:会触发 activated;事件挂载的方法等,只执行一次的放在 mounted 中;组件每次进去执行的方法放在 activated 中
 
页面只刷新一次,任何页面跳转到这个页面都不刷新
方法一: 直接在你的router-view 标签外面 包裹一个 keep-alive标签, 加 include="组件名称"
<keep-alive  include="FileList">
     <router-view></router-view>
</keep-alive>
这时候匹配到的组件就会值加在一次。这个就比较简单,但能使用性不广。 
 方法二: (keep-alive与vue-router配合使用)
配置路由器的时候 需要加 keepAlive: true 参数
    {
       path: 'Loading',//等待页面
       component: Loading,
       meta: {
         requireAuth: true, // requireAuth属性作用是表明该路由是否需要登录验证,在进行全局拦截时,我们将通过该属性判断路由的跳转,该属性包含在meta属性中:
         keepAlive: false, //此组件不需要被缓存false 需要缓存为true
   }
 
配置入口文件
<keep-alive>
     <router-view v-if="$route.meta.keepAlive">
     <!-- 这里是会被缓存的视图组件,比如 Home! -->
    </router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
       <!-- 这里是不被缓存的视图组件,比如 Edit! -->
之后在 router.beforeEach  方法里面来动态修改 keepAlive  的值 
 
router.beforeEach((to, from, next) => {
  iView.LoadingBar.start();//loadong 效果
 
  //进入登录页面的时候清除 token
  if(to.path === '/login' ){
    sessionStorage.removeItem("token", '');
    sessionStorage.removeItem("user_Data", '');
  }
  store.state.token = sessionStorage.getItem('token');//获取本地存储的token
  if (to.meta.requireAuth) {  // 判断该路由是否需要登录权限
    if (store.state.token !== "" && store.state.token !== null) {  // 通过vuex state获取当前的token是否存在
      //判断是否需要缓存
      if(to.path === '/filelist' && from.path === '/fileview'){
        to.meta.keepAlive = true;  // 让 列表页 缓存,即不刷新
        next();
      }else {
        to.meta.keepAlive = false;  // 让 列表页 即不缓存,刷新
        next();
      }
    }else {
      next({
        path: '/login',
        query: {redirect: from.fullPath}  // 将跳转的路由path作为参数,登录成功后跳转到该路由
      })
    }
 
  }else {
    next();
  }
})

我这里只判断  to.path === '/filelist' && from.path === '/fileview' (翻译从文一下这个代码,本路径是fileview,要跳转的路径是filelist,也就是从fileviewlu路径跳转到filelist,不刷新filelist页面)表页的时候缓存。

这里我们就可以愉快的使用之前缓存是数据了。

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
a