辉太郎看前端(keep-alive)

keep-alive

keep-alive的概念：keep-alive是vue提供给我们的一个动态组件，在路由转换时，缓存组件的状态。在页面渲染完毕后，不会被渲染成一个dom元素。

全局缓存

用keep-alive把router-view包裹起来。

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

注： 全局缓存是在app.vue中包裹router-view

局部缓存

在app.vue中用if判断来判断是否缓存，写两个router-view。

• 在路由文件(router.js)中，设置要缓存的组件。

{
 path:'/路由名',
 name:'params引入名',
 component:组件路径,
 meta:{
 keepAlive:true,  //缓存
}

• 在app.vue中用if语句来判断是否缓存，写两个router-view
  。

//设置过meta属性的展示区，缓存展示区
<keep-alive>
     <router-view v-if="$route.meta.keepAlive"/>
</keep-alive>
//为不缓存的展示区域
<router-view v-if="!$route.meta.keepAlive"/>

注： 缓存内容一定要设置meta属性，在app.vue之外，如果还有展示区域，且是缓存组件的父级，记得也要用keep-alive包裹并判断是否缓存。

总结

有不合理的地方，望路过的各位多多指教。