vue-element-admin 三级路由缓存

在 vue-element-admin 中，可以通过配置路由 meta 中的 keepAlive 属性来进行缓存。但是对于三级路由缓存，需要将他们作为二级路由的子路由进行配置。

具体配置方式如下：

1. 在 router/index.js 中，将三级路由定义为二级路由的子路由，例如：

{
  path: '/system',
  component: Layout,
  redirect: '/system/menu',
  name: 'System',
  meta: { title: '系统管理', icon: 'example' },
  children: [
    {
      path: 'menu',
      name: 'Menu',
      component: () => import('@/views/system/menu'),
      meta: { title: '菜单管理', icon: 'table', keepAlive: true }
    },
    {
      path: 'role',
      name: 'Role',
      component: () => import('@/views/system/role'),
      meta: { title: '角色管理', icon: 'tree', keepAlive: true }
    },
    {
      path: 'user',
      name: 'User',
      component: () => import('@/views/system/user'),
      meta: { title: '用户管理', icon: 'user', keepAlive: true }
    },
    {
      path: ':id', // 三级路由
      name: 'EditUser',
      component: () => import('@/views/system/edit-user'),
      meta: { title: '编辑用户', icon: 'user', hidden: true } // 隐藏该路由
    },
  ]
},

2. 在 src/layout/components/MultiTab下的index.vue中，监听路由变化，根据当前路由中的 fullPath 进行判断，如果是三级路由，则将 fullPath 的前缀作为 parentPath 保存下来，用于找到他的二级父路由，从而正确进行缓存。

computed: {
  // 通过 fullPath 匹配出二级父路由名称
  parentPath() {
    const { fullPath } = this.$route;
    const matched = this.$route.matched;
    if (matched && matched.length > 2) {
      const parentPath = `/${matched[1].path}`;
      return fullPath.replace(parentPath, '').split('/')[1];
    }
    return '';
  },
  // 是否需要缓存
  needKeepAlive() {
    const { meta } = this.$route;
    if (meta && (typeof meta.keepAlive !== 'undefined')) {
      return meta.keepAlive;
    }
    return false;
  }
},

watch: {
  '$route': function(newVal, oldVal) {
    // 监听路由变化，判断是否需要缓存
    if (this.needKeepAlive) {
      const fullPath = newVal.fullPath;
      if (fullPath !== oldVal.fullPath) {
        const parentPath = this.parentPath;
        if (parentPath) {
          this.cacheList.push(`${parentPath}/${fullPath}`);
        } else {
          this.cacheList.push(fullPath);
        }
      }
      this.$forceUpdate();
    }
  }
}

3. 在 src/layout/components/MultiTab下的tab-list.vue中，根据传入的 cacheList 进行渲染路由缓存。

<keep-alive>
  <router-view v-if="$route.meta.keepAlive" :key="$route.path" />
</keep-alive>
<component v-else :is="currentRoute.component" :key="currentRoute.path" />
...
computed: {
  // 用于 keep-alive 的路由列表
  keepAliaveList() {
    if (this.cacheList.length) {
      const keepAliveList = this.cacheList.map(item => {
        const matched = item.split('/');
        if (matched.length > 2) {
          // 当前路由是三级路由，需要找到他的二级父路由
          const parentPath = `/${matched[1]}`;
          const parentRoute = this.getRouteObjByName(parentPath);
          if (parentRoute) {
            return {
              ...this.getRouteObjByName(item),
              parent: parentRoute
            };
          }
        } else {
          // 当前路由是二级路由，直接返回
          return this.getRouteObjByName(item);
        }
      }).filter(item => item);
      return keepAliveList;
    }
    return [];
  }
},
methods: {
  // 根据路由名称获取路由对象
  getRouteObjByName(name) {
    const routes = this.$router.options.routes;
    const obj = routes.find(route => route.path === name);
    return obj;
  },
  // 关闭所有缓存的标签页
  closeAllTags() {
    this.cacheList = [];
    this.$store.dispatch('multiTab/resetTabs');
  },
  ...
}

通过这些配置，即可实现 vue-element-admin 的三级路由缓存功能。