vue-element-admine动态路由死循环

在使用vue-element-admin进行动态路由配置时，可能会遇到死循环的问题。这通常是由于路由配置不正确或递归调用导致的。以下是一些常见的原因和解决方法：

1. **递归路由配置**：
- **原因**：在路由配置中，某个路由的子路由包含了自身，导致无限递归。
- **解决方法**：检查路由配置，确保没有路由的子路由包含自身。

2. **异步路由加载**：
- **原因**：在异步加载路由时，可能由于异步操作未完成，导致路由无法正确加载，从而进入死循环。
- **解决方法**：确保异步操作完成后再加载路由。可以使用Promise或async/await来确保路由加载的顺序。

3. **权限控制问题**：
- **原因**：在权限控制中，可能由于权限判断逻辑不正确，导致路由不断被添加或移除。
- **解决方法**：检查权限控制逻辑，确保权限判断正确，避免不必要的路由操作。

4. **路由重复添加**：
- **原因**：在动态添加路由时，可能由于某种原因导致相同的路由被多次添加。
- **解决方法**：在添加路由前，检查路由是否已经存在，避免重复添加。

以下是一个简单的示例，展示了如何避免动态路由死循环：

import Vue from 'vue';
import Router from 'vue-router';
import store from '@/store';
import { getRoutes } from '@/api/permission';

Vue.use(Router);

const createRouter = () => new Router({
  routes: [
    // 基础路由
    {
      path: '/login',
      component: () => import('@/views/login/index'),
      hidden: true
    },
    // 其他基础路由
  ]
});

const router = createRouter();

// 动态添加路由
export function resetRouter() {
  const newRouter = createRouter();
  router.matcher = newRouter.matcher;
}

export default new Router({
  scrollBehavior: () => ({ y: 0 }),
  routes: []
});

export function initDynamicRoutes() {
  return new Promise((resolve, reject) => {
    getRoutes().then(res => {
      const accessedRoutes = filterAsyncRoutes(res.data);
      router.addRoutes(accessedRoutes);
      resolve();
    }).catch(error => {
      reject(error);
    });
  });
}

function filterAsyncRoutes(routes) {
  const res = [];

  routes.forEach(route => {
    const tmp = { ...route };
    if (tmp.children) {
      tmp.children = filterAsyncRoutes(tmp.children);
    }
    res.push(tmp);
  });

  return res;
}

在这个示例中，`initDynamicRoutes`函数用于初始化动态路由，确保在添加路由前进行了异步操作，并且通过`filterAsyncRoutes`函数过滤路由，避免递归和重复添加。