记录---根据权限动态控制路由

这个方案采用后端根据登录者的权限，返回一个含有权限路由url的对象数组，如下图

前端根据url数组匹配路由，动态生成路由

这个是基于webpack工具函数，查找对应文件夹下单个的路由文件。

目录结构如图

然后在utils文件夹里面建一个map-menus文件

export function menuMapToRoutes(userMenus: any[]): RouteRecordRaw[] {
  const routes: RouteRecordRaw[] = []

  // 1.读取本地所有的路由
  const localRoutes: RouteRecordRaw[] = []
  const routeFiles = require.context('../router/main', true, /\.ts/)
  routeFiles.keys().forEach((key) => {
    if (key.indexOf('./main.ts') !== -1) return
    const route = require('../router/main' + key.split('.')[1])
    localRoutes.push(route.default)
  })

  // 2.菜单的映射
  const _recurseGetRoute = (menus: any[]) => {
    for (const menu of menus) {
      if (menu.type === 2) {
        const route = localRoutes.find((route) => route.path === menu.url)
        if (route) routes.push(route)
        if (!firstRoute && !firstMenu) {
          firstMenu = menu
          firstRoute = route
        }
      } else {
        _recurseGetRoute(menu.children ?? [])
      }
    }
  }
  _recurseGetRoute(userMenus)

  return routes
}

这个函数的调用时机是在用户点击完登录，获取用户信息等数据后调用

 然后再去到导航组件

import { useRouter} from 'vue-router'

 const router = useRouter()

 const handleItemClick = (item: any) => {
    //把路由加进去
      router.push({
        path: item.url ?? '/not-found'
      })
    }

最后再去对应的组件里面添加<router-view></router-view>占位

vue两个项目合并 怎么设置不同入口和打包路径 - 编程乐园