keep-alive

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