关于vuekeepalive:true的组件,跳转keepalive:false的组件后不能维持原页面状态的问题处理

101 阅读1分钟

这几天在给公司写业务的时候,偶然发现一个问题,就是:当我从一个keepAlive为true的页面,跳到一个keepAlive为false的页面,再跳回来的时候,发现为true的页面不能保持原页面的逻辑。

结合代码看了一下,我这里的router-view是这么写的:

image.png

用jsx的写法,封装了不同情况的的router-view,按理说是没有问题的,于是,我用devtools组件查看了页面, 发现在我切换不同情况的页面的时候,页面会整体都刷新,也就是说,当我从keepAlive:false的页面跳转到为true的页面的时候,组件刷新的效果是这样的:

image.png

有点离谱了,但经过一番研究后发现:

image.png

当我不使用jsx的写法,用这种较为原始的方法写的时候,就是没有问题的,对比之下,发现后者跟前者的不同点在于,即使当页面是keepAlive:false的时候,keep-alive这个组件是不会消失的,到这里我明白了!

个人认为:我用jsx的写法封装的组件,会导致两种情况缺失一个keepAlive的组件,会导致整个页面重排,使得这个页面重新刷新了一遍,所以无法保留原来的效果。(有不对的地方,希望大佬可以指正!)

改造以后的写法是:

image.png

问题就解决啦