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
包裹并判断是否缓存。
总结
有不合理的地方,望路过的各位多多指教。