vue路由缓存的几种实现方式

vue-router时 keep-alive 页面缓存问题解决

keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。当组件在 keep-alive内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
作用：在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。
原理：在 created 函数调用时将需要缓存的 VNode 节点保存在 this.cache 中；在 render（页面渲染） 时，如果 VNode 的 name 符合缓存条件（可以用 include 以及 exclude 控制），则会从 this.cache 中取出之前缓存的 VNode 实例进行渲染。

在我们的日常开发中，有时候会遇到页面的缓存，特别是电商的项目，在商品列表的一些状态都是要缓存下来的。

下面就简单介绍几种 vue 路由缓存的几种方式。

---

全部缓存

直接用keep-alive标签包裹 router-view 标签就能缓存全部的页面了

<keep-alive>
  <router-view></router-view>
</keep-alive>

---

缓存单个指定路由

同样直接用 keep-alive 标签包裹router-view标签，然后使用 include 指定需要缓存的页面的 name 名称
可以使用 v-bind 绑定一个 name 数组，也可用 ‘，’ 隔开，也可使用正则表达式，多个的情况建议使用第三种

注意：是缓存页面的 name 名称，而不是缓存页面路由的 name 名称

<keep-alive include="该路由的name名称">
  <router-view></router-view>
</keep-alive>

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

---

缓存多个指定路由

<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

使用两个 router-view 标签分别作为缓存和不缓存的路由出口，在路由配置的时候，只需要给要缓存的页面加上 meta 属性，然后添加 keepAlive 属性设置为 true 即可。例如：

{
 path:'/test',
 name:'Test',
 component: Test,
 meta: {keepAlive: true} //true缓存 false不缓存
}

---

activated和deactivated

activated，deactivated 这两个生命周期函数一定是要在使用了 keep-alive 组件后才会有的，否则则不存在。
当引入 keep-alive 的时候，页面第一次进入
钩子的触发顺序 created-> mounted -> activated，退出时触发deactivated。
当再次进入（前进或者后退）时，只触发 activated
注意：keep-alive里面紧跟包裹 router-view 组件，而不能出现其他标签，不然会导致无法缓存页面。

---