vue keep-alive导致再次进入父路由时不会自动切换到默认的子路由页面
最近写项目遇到一个问题,很头疼,几天了,问了好些大佬,都没有找到问题的解决方案,但是,最后还是被我找到了,可喜可贺...
问题
有一个home页,home页里面有router-link元素进行子路由切换,为了减少资源损耗,所以直接使用了keep-alive进行路由页缓存,假设有三个子路由abc,a路由页面有两个子路由a-1和a-2,默认是a-1显示。
当我们进入到a路由是,默认显示a-1,然后我们切换到a-2,然后路由push返回到home页,再次进入到a页面时,你会发现,a路由此时显示的a-2而不是a-1,但浏览器地址是a-1的地址,此时,我们可能没办法切换到a-1了。
问题图
为什么
主要因为keep-alive会缓存,当我们切换到a-2的时候,a路由缓存的就是a-2,本来按正常流程,我们可以通过go(-1)
的方式返回到a-1,但是我们进入了home页,这样就打断了正常的返回流程,再次进入a路由是,由于keep-alive的效果,减少了重新加载dom,他会从缓存里读取之前缓存的内容,从而减少资源损耗。
但是也正因为这个效果,导致a页面直接拉取的缓存,所以下次进入的时候就是a-2了。
解决办法
此处内容已隐藏回复后方可阅读。
解决图
分类:
vue 项目实战
标签:
vuekeep-alive路由
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿站点。未经许可,禁止转载。
全部评论 13
keke
Google Chrome Windows 10nb
Google Chrome MacOSdebin
Google Chrome Windows 101
Google Chrome Windows 10lmh
Google Chrome Windows 10大大熊
Google Chrome Windows 10233
Google Chrome Windows 101111
Google Chrome Windows 101111
Google Chrome Windows 102
Google Chrome Windows 10