Welcome to WuJiGu Developer Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
874 views
in Technique[技术] by (71.8m points)

ant design vue pro 多页签模式下,根据需求进行组件缓存

ant design vue pro项目中,选择多页签模式,会通过项目中的RouteView组件,利用keep-alive对打开的组件进行缓存,方便切换标签时,使组件保存当时的状态。
但这样会对所有组件都进行缓存,即使通过标签页关闭后。
MultiTab组件里的关闭,其实只是删除了标签,使不能再通过标签打开组件。

想达到的目的是切换标签时,组件保持状态;关闭标签后,再打开组件时,组件是新状态。

应用场景:
例如:侧边栏打开 ‘人员列表’,在改组件中有个按钮 ‘新增人员’,点击后打开 ‘新增人员’组件。
此时有俩标签 ‘人员列表’、 ‘新增人员’,切换时都保持状态。‘新增人员’ 中输入内容后,通过标签关闭,由于keep-alive的缓存,在次从 ‘人员列表’ 中打开 ‘新增人员’, 之前输入的东西都还在 ┭┮﹏┭┮

尝试过,‘新增人员’activated时,将本身实例传入MultiTab中保存,但通过标签关闭时,在MultiTab中找到对应实例使用$destroy(),这样再打开就会重新生成实例。
但悲剧的是,这样操作后(关闭后再打开),在切换标签时,每次切到之前销毁的那个组件,该组件就会新生成一个实例

完全懵逼了,不晓得怎么处理,求大佬搭救,给个思路。


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

在打开页面时验证多标签页中是否存在要打开的这个页面,如果存在则不需要activeted更新数据,如果不存在则使用activeted更新页面数据


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to WuJiGu Developer Q&A Community for programmer and developer-Open, Learning and Share
...