背景
有多个keep-alive 导致两个组下 互相删除不起作用。页面中路由嵌套的多,每层嵌套的下面都有一个keep-alive。然后tab菜单删除缓存未清掉。
解决方法
把嵌套的路由打平,只存在一级。外层只包裹一个keep-alive。
然后通过动态修改keep-alive组件的 include属性。来实现关闭tab标签,则删除对应的include。
代码
<keep-alive :include="keepAliveNames">
<router-view/>
</keep-alive>
//keepAliveNames 可以是一个数组,里面存着的是要缓存的组件的name值。定义组件的时候要制定name。是根据这个name 做缓存的。
最好的方式是将打开的tab页面数组和keepAliveNames 整合为一个数组。数据保持统一性。这样tab页面删除,keepAliveNames里面也自动删除。如果不是一份数据,则需要维护两份数据保持一致。有点麻烦,还容易有时候不一致,产生bug。
网友评论