1、在router定义中增加meta{keepAlive:true}
{
path: '/app',
name: 'app',
component: pages['App'],
meta: { keepAlive: true}
},
2、router-view区分对待
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
3 、子页面中增加beforeRouteLeave
beforeRouteLeave(to, from, next){
// 再次指定使用keepAlive特性
to.meta.keepAlive = true
next()
setTimeout(function (){
// 取消keepAlive特性,由其他父路由转到to的路由时,to的页面需要刷新
to.meta.keepAlive = false
},1000)
4、子页面数据更改,父页面需要刷新时
父页面
activated() {
const apps = JSON.parse(sessionStorage.getItem('apps'));
if (apps != null) {
this.initAppList();
}
sessionStorage.removeItem("apps");
},
子页面,数据改变时标记
this.$message.success('操作成功!')
sessionStorage.setItem('apps',"true");
因为用的sessionStorage,所以使用视具体情况吧
5、参照
https://blog.csdn.net/yan263364/article/details/84402595
https://www.cnblogs.com/ivy-zheng/p/13306789.html