Vue keep-alive防止重复渲染DOM总结

一，VUE单页面应用文件实现返回上一页面时保留之前的数据

最近在做项目时，需要实现下面场景：

在页面查询列表，进入详情页时，返回时需要页面返回到上次浏览的位置（保留之前的当前页和搜索条件数据）

针对上面的需求：
页面的缓存，我们需要用到vue的内置组件keep-alive，来缓存列表页面，同时配合路由选项俩更改页面的数据
1.在路由出口渲染组件时配置：

<keep-alive  include = 'products'>
      <router-view> </router-view>
</keep-alive>

介绍一下<keep-alive>这个内置组件
<keep-alive>是vue 的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。
<keep-alive>包裹动态组件时，而不是销毁他们。和<transition>相似，<keep-alive>是一个抽象组件：他自身不会渲染一个DOM元素，也不会出现在父组件链中。
<keep-alive>有两个属性：
（1）include：字符串或者正则表达式，只有匹配的组件会被缓存。
exclude:字符串或者正则表达式，任何匹配的组件都不会被缓存。
2.在需要做缓存的页面加上name

    export default{
      name:'products',
       data(){
        return{
         
      }
   }
}

注意需要缓存页面里的name里的名字要和 include里的名字一致才会缓存。