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

问题

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

  1. keke
    keke
    Google Chrome Windows 10
    [脱单doge][脱单doge]看看[脱单doge]
  2. nb
    nb
    Google Chrome MacOS
    看看
  3. debin
    debin
    Google Chrome Windows 10
    看啊看
  4. 1
    1
    Google Chrome Windows 10
    康康
  5. lmh
    lmh
    Google Chrome Windows 10
    我瞧瞧
  6. 大大熊
    大大熊
    Google Chrome Windows 10
    看看是不是同一个问题
  7. 233
    233
    Google Chrome Windows 10
    让我康康
  8. 1111
    1111
    Google Chrome Windows 10
    有点东西[支持]
  9. 1111
    1111
    Google Chrome Windows 10
    [微笑]
  10. 2
    2
    Google Chrome Windows 10
    不知道是不是同样的问题,看看

目录