vue3 + ts 后台动态路由菜单渲染

1，创建菜单所以对应的页面

image.png

2，创建页面所对应的路由

image.png

image.png

这里使用了一个插件 coderwhy

npm i coderwhy -g

使用这个命令符可以快速搭建出上述页面

//    coderwhy add3page 文件名 -d 对应目录路径                       
coderwhy add3page dashboard -d src/views/main/analysis/dashboard

3，创建map-menus.ts文件

image.png

import { RouteRecordRaw } from 'vue-router'

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

  const routeFiles = require.context('../router/main', true, /\.ts/)
  // console.log('routeFiles', routeFiles.keys())
  //拿到所有页面文件的路径
  routeFiles.keys().forEach((key: any) => {
    //根据路径拿到所有页面文件
    const route = require('../router/main' + key.split('.')[1])
    allRoutes.push(route.default) //default这个属性对应的就是export default 的 default，如果你写成 export xx = {} 那这里就取route.xx
    //也就是说我们把每个文件中导出的对象都push到allRoutes中了
  })

  const _recurseGetRoute = (menus: any[]) => {
    for (const menu of menus) {
      if (menu.type === 2) {
        //根据给的权限菜单 匹配出所需要的菜单的文件
        const route = allRoutes.find((route) => route.path === menu.url)
        if (route) {
          routes.push(route)
        }
      } else {
        _recurseGetRoute(menu.children)
      }
    }
  }
  _recurseGetRoute(userMenus)

  return routes
}

然后在你对应想要获取路由表的地方使用map-menus.ts文件中导出的mapMenusToRoutes函数就可以得到路由表，我的首页叫做mian

  //动态获取路由
      const routes = mapMenusToRoutes(userMenus)
 // 将routes => router.main.children
      routes.forEach((route) => {
        router.addRoute('main', route)
      })

参考：

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import localCache from '@/utils/cache'

const routes: Array = [
  {
    path: '/',
    redirect: 'main'
  },
  {
    path: '/login',
    name: 'login',
    component: () =>
      import(/* webpackChunkName: "about" */ '@/views/login/index.vue')
  },
  {
    path: '/main',
    name: 'main',
    component: () => import('@/views/main/index.vue')
  }
]


const router = createRouter({
  history: createWebHashHistory(),
  routes
})

router.beforeEach((to) => {
  if (to.path !== '/login') {
    return localCache.getItem('token') ? true : '/login'
  }
})

export default router

然后菜单组件：

数据返回是这样哒：

image.png

最后长这样：

image.png