关于vue keep-alive第一次不生效的问题

Question

我的业务需求是
在一个列表页 这个列表页有分类的标签 有筛选条件 当用户选择后进入详情页需要保留这些数据 退回是筛选条件还在 当时想的肯定是用keep-alive缓存了 但是我发现了一个问题 就是第一次从详情页退回不会缓存 第二次才会

我的代码如下

   <keep-alive >
      <router-view v-if="this.$route.meta.keepAlive" ></router-view>
    </keep-alive>
  <router-view v-if="!this.$route.meta.keepAlive"></router-view>

在keep-alive中添加缓存条件

在订单详细页面

  beforeRouteLeave(to,from,next){
    console.log(to)
    if(to.name == 'order_list'){
      console.log(to.name)
      to.meta.keepAlive = true
        next()
    }else{
      next()
    }
  },

剩下的就是将其他页面进入orderList页面的keepAlive设置为false

Answer 1

你在详情页面添加的路由钩子，肯定是要在进一次详情页面才生效的

建议将 v-if 替换成 include 数组做缓存业务

具体 参考这里

Answer 2

你好，怎么解决列表路由跳转到详情页后第一次返回没缓存，第二次就可以了

Answer 3

我也遇到了这个问题 请问解决了吗？如何解决的