Vue如何实现组件缓存

keep-alive：组件级缓存

两种模式：全局缓存/局部组件缓存

页面跳转到详情页面时，需要保持列表页的滚动条的深度，等返回的时候也然在这个位置。

使用方式：keep-alive是抽象组件（或称为功能型组件），实际不会被渲染在 DOM树中。它的作用是在内存中缓存组件（不让组件销毁），等到下次渲染的时候，还保持其中的所有状态，并触发activated钩子函数。缓存的额需要通常出现在页面切换时

全局缓存

1
2
3

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

局部缓存：使用keep-alive组件的include/exclude属性。include属性表示要缓存的组件名（组件定义时的name属性）

<!--缓存想要缓存的页面，实现后退不刷新-->
<!--加上v-if的判断，可以自定义想要缓存的组件，自定义在router里面-->
<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

在router文件加上meta判断

export default new Router({
    {
    // home会被缓存
    path:"/home",
    component:home,
    meta:{keepAlive: true}
    },
      {
     // home不会被缓存
    path:"/home",
    component:home,
    meta:{keepAlive: false}                
       }                    
})

注：如果想要看有没有缓存成功，可以再各个组件的created钩子里面打印输出标志，缓存成功就是首次进入页面，created会请求数据，后面就不会再次请求而是直接调用缓存的

本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议，转载请注明出处。