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

问题

有一个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. nb
    nb
    Google Chrome MacOS
    看看
    回复
  2. debin
    debin
    Google Chrome Windows 10
    看啊看
    回复
  3. 1
    1
    Google Chrome Windows 10
    康康
    回复
  4. lmh
    lmh
    Google Chrome Windows 10
    我瞧瞧
    回复
  5. 大大熊
    大大熊
    Google Chrome Windows 10
    看看是不是同一个问题
    回复
  6. 233
    233
    Google Chrome Windows 10
    让我康康
    回复
  7. 1111
    1111
    Google Chrome Windows 10
    有点东西[支持]
    回复
  8. 1111
    1111
    Google Chrome Windows 10
    [微笑]
    回复
  9. 2
    2
    Google Chrome Windows 10
    不知道是不是同样的问题，看看
    回复
  10. 1
    1
    Google Chrome Windows 10
    正好遇到的问题
    回复
    1. 木灵鱼儿
      木灵鱼儿
      FireFox Windows 10
      @1[doge]请问你是怎么找到这篇文章的
      回复
  1. 1
  2. 2

相关推荐

木灵鱼儿 vue 项目实战

实现一个点击空白区域关闭显示的自定义指令

514 0 0
木灵鱼儿 vue 项目实战

使用vue2.7的一些踩坑事项

2248 5 0
木灵鱼儿 vue 项目实战

正确使用vue3的ts类型声明

8494 0 1
木灵鱼儿 vue 项目实战

关于给css自动添加浏览器前缀

1407 0 0
木灵鱼儿 vue 项目实战

vuex 动态注册和卸载模块

1205 0 0
木灵鱼儿 vue 项目实战

vue-i18n 的使用方式

1592 1 2
木灵鱼儿 vue 项目实战

vue router 一个重定向页面的思路

2696 0 0
木灵鱼儿 vue 项目实战

vue 过滤器 驼峰与短横线相互转换的方法

2000 0 2
木灵鱼儿 vue 项目实战

使用vue.draggable拖拽组件遇到的一些问题

3808 44 3
木灵鱼儿 vue 项目实战

关于 element table多选里面实现单选的偷懒做法

3283 0 0
获得点赞 0
文章被阅读 4188

目录