QRAPI/Web/src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
/* Layout */
import Layout from '@/layout/index.vue'

/**
 * Note: sub-menu only appear when route children.length >= 1
 * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
 *
 * hidden: true                   if set true, item will not show in the sidebar(default is false)
 * alwaysShow: true               if set true, will always show the root menu
 *                                if not set alwaysShow, when item has more than one children route,
 *                                it will becomes nested mode, otherwise not show the root menu
 * redirect: noRedirect           if set noRedirect will no redirect in the breadcrumb
 * name:'router-name'             the name is used by <keep-alive> (must set!!!)
 * meta : {
    roles: ['admin','editor']    control the page roles (you can set multiple roles)
    title: 'title'               the name show in sidebar and breadcrumb (recommend set)
    icon: 'svg-name'/'el-icon-x' the icon show in the sidebar
    breadcrumb: false            if set false, the item will hidden in breadcrumb(default is true)
    activeMenu: '/example/list'  if set path, the sidebar will highlight the path you set
  }
 */

const modules = import.meta.glob('../views/**/*.vue')
/**
 * 返回指定路径的模块
 * @param {string} path 组件路径/views/xx/xx.vue
 * @param {string} rename 组件重命名的名字 默认 null
 * @returns 
 */
function findModules(path,rename=null) {
  let findPath = '../views' + path
  if(rename){
   return () =>
    modules[findPath]().then((result) => {
      result.default.__name = rename
      return result
    })
  }else{
    return  modules[findPath]
  }
}

/**
 * constantRoutes
 * a base page that does not have permission requirements
 * all roles can be accessed
 */
export const constantRoutes = [
  {
    path: '/redirect',
    component: Layout,
    hidden: true,
    name: 'Redirect',
    children: [
    {
        path: '/redirect/:path(.*)',
        component: () => import('@/views/system/redirect/index.vue')
      }
    ]
  },
  {
    path: '/login',
    component: () => import('@/views/system/login/index.vue'),
    name: 'login',
    hidden: true
  },
  {
    path: '/404',
    component: () => import('@/views/404.vue'),
    name: '404',
    hidden: true
  },
  {
    path: '/500',
    component: () => import('@/views/500.vue'),
    name: '500',
    hidden: true
  },
  { path: '/:catchAll(.*)',component: () => import('@/views/404.vue'),name: 'allto404', hidden: true }
]

/**
 * asyncRoutes
 * the routes that need to be dynamically loaded based on user roles
 */
export const asyncRoutes = []

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
  for (let i in asyncRoutes) {
    let rname = asyncRoutes[i].name
    if (rname != 'allto404') {
      router.removeRoute(rname)
    }
  }
  asyncRoutes.length = 0
}

export function addDynamicRoutes(routes) {
  //0 代表为根目录 、菜单
  let roots= routes.filter(it=>it.parentId==0)
  asyncRoutes.length = 0

  for (let i in roots) {
    asyncRoutes.push(_addRoutes(roots[i],routes))
  }
  // 404 page must be placed at the end !!!
  //asyncRoutes.push({ path: '/:catchAll(.*)', redirect: '/404', name: 'allto404', hidden: true })
  for (let i in asyncRoutes) {
    router.addRoute(asyncRoutes[i])
  }
}

function _addRoutes(routeInfo,routes) {
  let route = { name: routeInfo.routeName?routeInfo.routeName:routeInfo.id, path: routeInfo.routePath, meta: { title: routeInfo.menuName } }
  if (routeInfo.componentPath) {
    if (routeInfo.componentPath == 'Layout') {
      route.component = Layout
    } else {
      // 动态加载组件，组件名称与路由名称保持一致，方便tagsView 的缓存和销毁 
      // keepalive 根据 tagsViewStore.cachedViews 缓存组件
      // vue3.3 以后使用 defineOptions({name: 'xxx'})
      route.component = findModules(routeInfo.componentPath)
    }
  }
  if (routeInfo.redirectPath) {
    route.redirect = routeInfo.redirectPath
  }
  if (routeInfo.menuIcon) {
    route.meta.icon = routeInfo.menuIcon
  }
  if (routeInfo.isAffix) {
    route.meta.affix = routeInfo.isAffix
  }
  if(routeInfo.isCache){
    route.meta.isCache = routeInfo.isCache
  }
  if(routeInfo.outLink){
    route.meta.outLink = routeInfo.outLink
  }
  //目录
  if(routeInfo.menuType===1){
    let children= routes.filter(it=>it.parentId===routeInfo.id)
    if (children.length > 0) {
      route.children = []
      for (let i in children) {
        route.children.push(_addRoutes(children[i],routes))
      }
    }
  }
  //菜单
  return route
}

export const router = createRouter({
  history: createWebHistory(),
  routes: constantRoutes
})