更新于

vue keep-alive导致再次进入父路由时不会自动切换到默认的子路由页面

发布于 / 分类: vue 项目实战 / 仅有1条评论 / 阅读量: 99

最近写项目遇到一个问题,很头疼,几天了,问了好些大佬,都没有找到问题的解决方案,但是,最后还是被我找到了,可喜可贺...

问题

有一个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了。

解决办法

此处内容已隐藏回复后方可阅读。

解决图

仅有一条评论

    终马
    终马

    来自 Windows10-Chrome 的网友发布于 57 天前

    让我康康

Info
站点信息

以前觉得活下去很难,现在发现活的好才难!

创建于20156

总共发表了327篇文章

共有545条评论

创建了21个分类目录

Archive
时间归档
Weather
天气

湿度
设置
配色方案

布局