若依关闭页签不会销毁 keep-alive 缓存的组件
问题场景
使用 keep-alive
缓存的组件。离开该页签时,组件状态为 inactive
;点击该页签时,组件状态为 active
。
点击按钮关闭该页签 this.$tab.closePage(view)
,该组件被销毁。
需求:在页面A中删除数据B,则之前点击数据B打开的页签C会被关闭(使用 this.$tab.closePage(view)
)。
该需求已实现,但有个问题是:同样调用了 this.$tab.closePage(view)
,但是却无法销毁该组件。原因不明。
问题:因为没有销毁组件,导致旧数据没有被重置,新建数据M,点击数据M打开页签N时,会继续使用旧数据,导致页面加载报错。
解决
解决思路:在A页面删除数据时,关闭对应页签的同时要销毁对应组件。
方案一:deactive() 钩子中销毁组件
在页签组件 StandardVersion
中添加以下代码:
deactivated() {
this.$destroy();
},
由于离开页签时,销毁了组件,那么再次点击页签时,会调用 created() 函数生成组件实例(会重新请求数据)。
缺点:keep-alive 缓存失去作用。
方案二(推荐):该组件不设置 keep-alive
既然方案一会让 keep-alive 失去作用,那干脆不设置 keep-alive。
页签组件 StandardVersion
的路由是在 router.js
中书写的,直接在 meta
选项中设置 noCache: true
即可。
总结
如果能找到:同样调用了 this.$tab.closePage(view)
,但是却无法销毁该组件的原因,就不用采取上述解决方案。
更新
找到原因了,this.$tab.closePage(view)
中 view
除了 path
之外,还需要有 name
,否则关闭页签时,无法销毁该组件。
请看源码:
-
delVisitedView
:根据path
删除页面上已打开的页签。
-
delCachedView
:根据name
删除缓存的页签,也就是销毁组件。
这件事说明了,仔细看文档和源码很重要。
本文来自博客园,作者:shayloyuki,转载请注明原文链接:https://www.cnblogs.com/shayloyuki/p/17921558.html
posted on 2023-12-22 15:52 shayloyuki 阅读(598) 评论(0) 编辑 收藏 举报