vue缓存标签keep-alive的属性include无效?

vue版本:2.5.10

列表页输入查询条件,过滤,点击其中一条跳转到详细路由,点击关闭返回到列表路由,发现输入的查询条件被清空了,并没有走缓存。

相关代码

index.vue 列表页

<transition name="fade-transform" mode="out-in">
    <keep-alive :include="cachedViews">
        <router-view :key="key"></router-view>
    </keep-alive>
</transition>

name: 'users-index',
computed: {
  cachedViews() {
    return this.$store.state.cachedViews
  },
  key() {
    return this.$route.fullPath
  }
}

网上查了一下,尝试着用多个keep-alive可以达到预期,修改后代码如下:

<transition name="fade-transform" mode="out-in">
  <keep-alive v-if="cachedViews">
    <router-view :key="key"></router-view>
  </keep-alive>
  <router-view v-if="!cachedViews"></router-view>
</transition>

name: 'users-index',
computed: {
  cachedViews() {
    const cacheds = this.$store.state.cachedViews
    if(cacheds && cacheds.length > 0){
      const cachedIdx = cacheds.findIndex(i => this.$route.name == i)
      return cachedIdx > -1
    }
    return false
  },
  key() {
    return this.$route.fullPath
  }
}

include为什么无效呢?

阅读 7k
2 个回答

找到答案了,缓存的name组件的name属性,不是routername属性。
参考:

include 绑定的是一个数组 和 v-if 判断的是不一样的
store 里面是怎么写的

推荐问题
宣传栏