vue3根据返回菜单处理动态路由

网上很多办法都试过，很多都用到vuex或 pinia 状态管理，可能写的位置不一样没有实现，就采用把返回的菜单保存local storage中

以下两种方法使用其中之一即可实现动态路由：

1. 登录成功把菜单信息保存到local storage中

2. 在router文件夹创建处理异步路由的方法（就是下面方法其中之一）

3. 在main.ts或者router.beforeEach中调用即可

注意：

在router.beforeEach中调用需要定义变量，根据变量调用、调用后变量重新赋值为false、否则会重复调用直到浏览器崩溃！

/**
 * 方法一
 * 动态绑定路由
 * @param menuList 菜单合集（localStorage中存储的菜单集合）
 * @param router 路由
 */
export function bindRoute(menuList: any, router: any) {
  let children = menuList
  menuList.forEach((item: any) => {
    // 有子级菜单，（menuSubClassVoList）根据后端子级字段渲染
    if (item.menuSubClassVoList.length) {
      item.menuSubClassVoList.forEach((m: any) => children.push(m));
    }
  })
  // 无子级菜单
  children = children.map((item: any) => {
    return ({
      path: item.menuPath,
      name: item.menuName,
      component: () => import(`@/views/sx/admin/${item.menuIdent}.vue`),
    })
  })
  // 添加动态路由
  router.addRoute({
    path: '/',
    name: 'layout',
    redirect: 'organization',
    component: () => import(`@/views/layout/inedx.vue`),
    children
  })
}


/**
 * 方法二
 * 动态绑定路由
 * @param menuList 菜单合集
 * @param router 路由
 */
export function bindRoute(menuList: any, router: any) {
  let children: any = []
  menuList.forEach((item: any) => {
    // 没有子级菜单
    if (!item.menuSubClassVoList.length) {
      children.push({
        path: item.menuPath,
        name: item.menuName,
        component: () => import(`@/views/sx/admin/${item.menuIdent}.vue`),
      })
    } else {
      // 有子级菜单
      for (let i = 0; i < item.menuSubClassVoList.length; i++) {
        children.push({
          path: item.menuSubClassVoList[i].menuPath,
          name: item.menuSubClassVoList[i].menuName,
          component: () => import(`@/views/sx/admin/${item.menuSubClassVoList[i].menuIdent}.vue`),
        })
      }
    }
  })
  // 添加动态路由
  router.addRoute({
    path: '/',
    name: 'layout',
    redirect: 'organization',
    component: () => import(`@/views/layout/inedx.vue`),
    children
  })
}