vue keep-alive 导航栏 编辑页面 列表页请求相同ID数据 缓存数据清空

如果你在 Vue 的 `keep-alive` 组件中缓存了一个编辑页面和一个列表页面，且两个页面都需要请求相同 ID 的数据，那么你可以在编辑页面中通过 `watch` 监听 ID 的变化，然后手动清除列表页面缓存中相同 ID 的数据。

实现过程如下：

1. 在列表页面中定义 `cache` 对象，用于缓存数据。

export default {
  data() {
    return {
      cache: {}
    }
  }
}

2. 在列表页面中，通过 `include` 属性将该组件添加到 `keep-alive` 组件中。

<template>
  <keep-alive include="List">
    <div>
      ...
    </div>
  </keep-alive>
</template>

3. 在编辑页面中，通过 `watch` 监听 ID 的变化，并手动清除列表页面缓存中相同 ID 的数据。

export default {
  data() {
    return {
      id: null
    }
  },
  watch: {
    id(newVal, oldVal) {
      if (oldVal) {
        delete this.$parent.cache['List'][oldVal]
      }
    }
  }
}

在上面的代码中，我们通过 `watch` 监听 `id` 的变化，如果 `id` 变化了，则手动清除列表页面缓存中相同 ID 的数据。

需要注意的是，我们使用了 `this.$parent.cache` 来获取列表页面缓存对象。这是因为 `keep-alive` 组件会将被缓存的组件挂载到父组件中，所以我们需要通过 `$parent` 属性获取到父组件，然后再从父组件中获取到缓存对象。

另外，我们使用了 `delete` 操作符来删除缓存对象中的相应数据。这是因为 Vue 的响应式系统会监听对象的属性变化，如果使用 `Vue.set()` 方法重新设置属性值，则会触发更新视图的操作，而我们不希望在清除缓存时触发更新视图的操作，所以使用 `delete` 操作符来删除属性值。