vue-element-admin实现多级路由缓存

Vue-element-admin 是基于 Vue.js 和 Element UI 实现的后台管理系统框架。它采用了 Vue Router 实现路由跳转和页面切换。在 Vue-element-admin 中，实现多级路由缓存可以通过以下步骤：

1. 在路由配置文件中，设置需要缓存的路由组件的 meta 属性中添加 keepAlive: true。

const routes = [
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [
      {
        path: 'dashboard',
        component: () => import('@/views/dashboard/index'),
        name: 'Dashboard',
        meta: { title: 'Dashboard', icon: 'dashboard', keepAlive: true }
      }
    ]
  }
]

2. 在 App.vue 文件中，添加 keep-alive 组件，并设置 include 属性为需要缓存的路由组件的名称。

<template>
  <div id="app">
    <keep-alive :include="cachedViews">
      <router-view />
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'App',
  computed: {
    cachedViews() {
      return this.$store.state.tagsView.cachedViews
    }
  }
}
</script>

3. 在 store 文件夹中创建 tagsView.js 文件，设置需要缓存的路由组件的名称和缓存状态。

const state = {
  cachedViews: []
}

const mutations = {
  ADD_CACHED_VIEW: (state, view) => {
    if (state.cachedViews.includes(view.name)) return
    if (!view.meta.keepAlive) return
    state.cachedViews.push(view.name)
  },

  DEL_CACHED_VIEW: (state, view) => {
    const index = state.cachedViews.indexOf(view.name)
    if (index > -1) {
      state.cachedViews.splice(index, 1)
    }
  }
}

const actions = {
  addCachedView({ commit }, view) {
    commit('ADD_CACHED_VIEW', view)
  },

  delCachedView({ commit }, view) {
    commit('DEL_CACHED_VIEW', view)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

这样就可以实现多级路由缓存了。需要注意的是，路由组件的名称必须是唯一的，否则可能会出现缓存错误。