解决 vue-element-admin 中三级路由不缓存的问题

<template>
  <div class="main">
    <keep-alive>
    //三级路由
      <router-view :key="key" />
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'BreakOrder',
  computed: {
    key () {
      return this.$route.path
    },
  },
  created() {
   const route = this.$route.matched.find(item => item.name === this.$options.name)
   this.$store.dispatch('tagsView/addCachedView', route)
 }
}
</script>

那么现在又有问题了，刷新或者关闭再打开当前3级路由的标签页时，缓存未清空？

问题总是有解决办法的，参考链接是这个issue： https://github.com/PanJiaChen/vue-element-admin/pull/3116

tagsView.js

addCachedView ({ commit }, view) {
    if (view.matched && view.matched.length >= 3) { // 若为三级及其以上路由点击打开标签页时，将三级路由或以上的根目录路由塞入缓存路由name list中
      commit('ADD_CACHED_VIEW', view.matched[1])
    }
    commit('ADD_CACHED_VIEW', view)
  },
  delCachedView ({ commit, state }, view) {
       return new Promise(resolve => {
      if (view.matched && view.matched.length >= 3) { // 若为三级及其以上路由关闭当前标签页                
           时，将3级路由以上的根目录name 从list中删除
        commit('DEL_CACHED_VIEW', view.matched[1])
      }
      commit('DEL_CACHED_VIEW', view) // 反之，正常的进行标签页的name 从list中删除
      resolve([...state.cachedViews])
    })
  },

在 vue-element-admin 中，二级路由能缓存，而三级路由不缓存，主要是因为 Vue 路由的层级关系和缓存机制处理不同层级路由时的差异：

1. 二级路由的缓存：

• 对于二级路由，通常 keep-alive 组件包裹的 <router-view> 直接显示路由组件。由于二级路由的路径结构较简单，keep-alive 可以很容易通过路径或名称来缓存并恢复组件的状态。
• 二级路由的 key 通常是稳定的（如 $route.name 或 $route.path），因此 Vue 可以通过这个 key 区分不同路由并保持缓存。

2. 三级路由不缓存的原因：

• 嵌套路由视图：三级路由是嵌套在二级路由中的，使用多个 <router-view> 来嵌套显示不同级别的路由组件。在这种情况下，默认的 keep-alive 缓存机制不能自动处理较深层次的嵌套路由。
• 动态 key 的问题：在三级路由中，Vue 可能无法正确地使用路径或路由名称作为 key 来区分每个路由组件。这会导致 Vue 认为多个不同的路由组件是同一个，进而使缓存失效，三级路由在切换时会重新加载。

3. 为什么需要额外操作：

• 由于三级路由的嵌套复杂性，单纯依赖默认的 keep-alive 缓存机制不足以区分不同层级的路由组件，因此需要引入动态 key 和 tagsView 来帮助缓存。
• 动态 key 的引入保证每个三级路由都有一个唯一标识，而 tagsView 的缓存视图操作确保在切换时不会丢失页面状态。因此，必须手动处理三级路由的缓存，确保它们的状态能正确保存并恢复。

总结：二级路由由于结构简单，keep-alive 能自动处理缓存；而三级路由因为层次更深且有多个嵌套路由视图，默认机制无法处理，必须通过动态 key 和手动加入缓存视图来确保它们的缓存和恢复。