Vue-Router实现前端页面缓存

目录

1、基本认识

（1）为什么要设置max？

（2）注意：

（3）页面缓存如何重新加载数据，或做数据处理？

2、代码实现

（1）使用include和exclude实现页面缓存

（2）动态判断要显示的router-view（路由出口）

3、总结

---

1、基本认识

        router-view（路由出口）标签在本质上也是一个functional组件，用于渲染路径匹配到的视图组件，它可以被keep-alive所包裹。

  keep-alive接收三个属性：

• include：取值为字符串或正则表达式。只有名称匹配的组件会被缓存
• exclude：取值为字符串或正则表达式。只有名称匹配的组件不会被缓存
• max：number，最多可以缓存多少组件实例。

（1）为什么要设置max？

        当大型项目的很多页面需要缓存时，如果不设置最大页面缓存量，当缓存数量过于庞大时，会占用很多内存，影响页面响应及用户体验。

（2）注意：

       include和exclude匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。

（3）页面缓存如何重新加载数据，或做数据处理？

        被缓存的组件都会新增两个生命周期，activated 和deactivated ，在重新进入被缓存的页面时，activated此生命周期会触发。在离开被缓存组件时，deactivated此生命周期会被触发。

        我们可以在相应的生命周期中进行一些数据的处理等。

2、代码实现

（1）使用include和exclude实现页面缓存

// App.vue
<template>
 <div>
  <keep-alive :include='aliveComponents'>
    <router-view></router-view>
  </keep-alive>
 </div>
</template>  
<script>
  export default{
    data() {
      return {
        //需要 要缓存的组件
        aliveComponents: ['productList']
      }
    }
  }
</script>

        name为productList的页面组件会被缓存起来，可以在钩子函数activated和deactivated中处理数据等。

（2）动态判断要显示的router-view（路由出口）

       为路由表中需要缓存的页面配置meta属性，新增keepAlive为true

// router/index.js
{
  path: '/productList',
  name: 'productList',
  component: () => import(/* webpackChunkName: "productList" */ '../views/product/index.vue'),
  meta: {
    keepAlive: true
  }
}

// App.vue
<template>
 <div>
  <keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive"></router-view>
 </div>
</template>  
<script>
  export default{
    data() {
      return {
        //要缓存的路由组件
        //aliveComponents: ['productList']
      }
    }
  }
</script>

此方法更推荐使用，因为我们可以动态的控制路由meta的keepAlive属性是否为true，根据业务需求，在组件钩子函数beforeRouteLeave中进行动态修改，从而做到某些时刻缓存，某些时刻重新加载。

// 假设
beforeRouteLeave(to, from, next){
    if(to.name === 'Cart') {
      to.meta.keepAlive = true
    }else{
      to.meta.keepAlive = false
    }
    next()
  }

3、总结

        无论是缓存页面还是缓存数据等，都要根据实际业务进行抉择，否则可能造成内存浪费或影响体验等。