利用了keep-alive的原理,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。而详情页面返回以后还是在当前页面当前数据需要的就是缓存而不是刷新。
在根组件app.vue里添加以下代码:
<keep-alive>
<router-view v-if="$route.meta.keepAlive"/>
</keep-alive>
<router-view v-if="!Sroutemeta.keepAlive"/>
在路由文件里,设置需要用到keep-alive的页面(哪个页面需要就在哪个路由里添加)
{
path:'HomeList',
component:()=>import('../page/HomeList/HomeList'),
meta:{
isUseCache:false,//默认不缓存
keepAlive:true //是否使用keep-alive
}
}