Subscribe on changes!

KeepAlive组件在多级路由触发混乱的问题

avatar
Jan 13th 2022

Version

3.2.26

Reproduction link

codesandbox.io

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?

不能正常缓存

avatar
Jan 16th 2022

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.

avatar
Jan 17th 2022

问题补充: 当A、B、M1、M2都被创建之后,从A到M1你会发现触发的是KeepAlive:如图: image image 也就是说从A或者B切换到M1和M2时都会触发KeepAlive,但是M1和M2之间切换却不会触发KeepAlive,如图: image 希望你们也仔细检查一下

avatar
Jan 17th 2022

The <router-view/> of the child route, also has to be wrapped by keepalive.

avatar
Jan 26th 2022

M1,M2并没有被缓存,你在m2加一个输入框,输入一点东西,从A切换过去M2,输入框并没有东西,那个activated应该是M界面触发的,因为M被缓存了,如果把M去掉,就只会触发created了, 子路由也需要加keepalive才能被缓存

avatar
Jan 29th 2022

你需要缓存的页面必须被同一个父级包裹, 而不是祖先级, 而你的m/ index.vue文件 并没有设置keepAlive 所以无法缓存m1 和 m2, 是用在其一个直属的子组件被切换的情形, 可以详细看下vue的文档: https://v3.cn.vuejs.org/api/built-in-components.html#keep-alive

修改代码: https://codesandbox.io/s/keen-phoebe-q5m8d?file=/src/layout/pages/m/index.vue

avatar
Apr 19th 2022

Closing as no boiled down reproduction was provided and it also seems to not be a bug.