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

问题

有一个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路由

评论

全部评论 12

  1. 终马
    终马
    Google Chrome Windows 10
    让我康康

目录