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.youkuaiyun.com/yan263364/article/details/84402595
https://www.cnblogs.com/ivy-zheng/p/13306789.html
本文介绍了如何在Vue应用中通过router-view的条件渲染、meta配置和子组件的beforeRouteLeave钩子来管理页面缓存。重点讲解了如何利用sessionStorage实现数据更新触发页面刷新,同时提供了相关技术参考链接。
784

被折叠的 条评论
为什么被折叠?



