KeepAlive组件在多级路由触发混乱的问题
Version
3.2.26
Reproduction link
Steps to reproduce
因为业务需求,建立了多级路由的界面之间的关系,发现按照官网的文档操作还是不能正常缓存,于是寻求解决方案。 终于,在一篇文章中发现,其实keep-alive组件的触发,在多级路由中需要将组件的name和route.name的名称一样,并且存入include里面,照着执行之后发现还是不行。 原来是我参照了vue-element-admin的设计思路,每一层路由都会有一个空page做router-view,于是将空page的name push到includes,这确实能触发activated钩子,但是,往返切换的话,你会发现,它不止每次触发activated钩子,还会触发created钩子(注意:是页面被缓存之后,还会触发created钩子) 这个问题很麻烦,请问是我使用不当还是bug呢?
What is expected?
组件能够被正常缓存
What is actually happening?
不能正常缓存
Your reproduction is not minimal, please read and follow https://new-issue.vuejs.org/?repo=vuejs/vue-next#why-repro when reporting a bug. Most bugs should be reproducible with the SFC Playground. Maybe there is already an existing bug report.
问题补充: 当A、B、M1、M2都被创建之后,从A到M1你会发现触发的是KeepAlive:如图: 也就是说从A或者B切换到M1和M2时都会触发KeepAlive,但是M1和M2之间切换却不会触发KeepAlive,如图: 希望你们也仔细检查一下
M1,M2并没有被缓存,你在m2加一个输入框,输入一点东西,从A切换过去M2,输入框并没有东西,那个activated应该是M界面触发的,因为M被缓存了,如果把M去掉,就只会触发created了, 子路由也需要加keepalive才能被缓存
你需要缓存的页面必须被同一个父级包裹, 而不是祖先级, 而你的m/ index.vue文件 并没有设置keepAlive 所以无法缓存m1 和 m2,
修改代码: https://codesandbox.io/s/keen-phoebe-q5m8d?file=/src/layout/pages/m/index.vue