关于keep-alive缓存router-view时子组件切换后父组件页面刷新的问题

近期入职的单位,希望页面有缓存,想都没想,第一反应就是keep-alive包裹router-view(思路为正解,且原先有解决的经验)

结果,一写出来,懵逼了,效果不是想要的!!!

开始找问题: 进入到子路由内,父级路由居然刷新了,这是什么神仙操作???

带着一脸的疑惑,那就给父级路由也缓存上,看看效果,打开vue-devtools,发现在切换子路由的时候,父级路由的组件居然出现多个!!!

什么鬼这是,真照这样下去,那不得卡死啊!!!

赶紧把父级路由的keep-alive去掉,再次切换子路由,看vue-devtools,每次切换都相当于生成个新的,这是为什么???

又是一脸的杠....

这操作给咱整蒙了都

因为以前写过这个,都没出现类似的问题,让我都怀疑自己是不是上岁数了,忘了以前怎么写的了,于是开始疯狂的查,查来查去也没个答案,倒是有几个提问的,孤零零的在那放着,也没人回答QAQ

哎,算了,靠天靠地不如靠自己,那就看代码吧

看了下keep-alive,有include属性,加上!!!

router-view标签,父级路由那有key值,行,咱那也加!!!

反应了一下,key值???这个是个比较有意思的东西,最简单直白的含义: 独一无二的属性!!!

独一无二?那就是key值变了?想了一下,这破玩意儿有啥好变的啊,不就是等于路由path或者name嘛,这再变能变出圈啊

结果仔细一看,这key写的值咋这么大一坨,定睛一瞧,挖草,这咋还有个时间戳里面啊!!!

难不成问题是这个时间戳?感觉是

但回头一想,为啥要这么写???删了/正常写有啥影响么,带着疑惑,看了遍逻辑,结果发现,完全没影响!!!

我TMD,WQTDYD,赶紧去了!!!

OK,缓存好用了

就这么简单0.0

结论:遇到上面的问题,完全是key值实时变化导致,修改正常/去掉即可

总结:   1. 就这么个破问题,纳闷了一晚上,这是哪个小可爱写的啊,啊?可气死我了,这个问题的出现完全是因为原代码不是我写的,导致一些逻辑还不清楚,改都不敢改

    2. 不要轻易否定自己,就这么个东西,以前还玩过,怎么可能写错呢QAQ

    3. 有些东西,百度搜不到,一般就是项目/个人的问题,而且比较奇葩...

 

posted @ 2022-03-03 21:03  程序员笔记--vue  阅读(865)  评论(0编辑  收藏  举报