198 lines
5.7 KiB
TypeScript
Raw Normal View History

2022-07-18 19:06:37 +08:00
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import type { Router, RouteLocationNormalized, RouteRecordNormalized } from 'vue-router'
import { isUrl } from '@/utils/is'
import { omit, cloneDeep } from 'lodash-es'
const modules = import.meta.glob('../views/**/*.{vue,tsx}')
/* Layout */
export const Layout = () => import('@/layout/Layout.vue')
export const getParentLayout = () => {
return () =>
new Promise((resolve) => {
resolve({
name: 'ParentLayout'
})
})
}
// 按照路由中meta下的rank等级升序来排序路由
export function ascending(arr: any[]) {
arr.forEach((v) => {
if (v?.meta?.rank === null) v.meta.rank = undefined
if (v?.meta?.rank === 0) {
if (v.name !== 'home' && v.path !== '/') {
console.warn('rank only the home page can be 0')
}
}
})
return arr.sort((a: { meta: { rank: number } }, b: { meta: { rank: number } }) => {
return a?.meta?.rank - b?.meta?.rank
})
}
export const getRawRoute = (route: RouteLocationNormalized): RouteLocationNormalized => {
if (!route) return route
const { matched, ...opt } = route
return {
...opt,
matched: (matched
? matched.map((item) => ({
meta: item.meta,
name: item.name,
path: item.path
}))
: undefined) as RouteRecordNormalized[]
}
}
// 后端控制路由生成
export const generateRoutes = (routes: AppCustomRouteRecordRaw[]): AppRouteRecordRaw[] => {
const res: AppRouteRecordRaw[] = []
const modulesRoutesKeys = Object.keys(modules)
for (const route of routes) {
const meta = {
title: route.name,
icon: route.icon,
hidden: !route.visible,
noCache: !route.keepAlive
}
// 路由地址转首字母大写驼峰作为路由名称适配keepAlive
let data: AppRouteRecordRaw = {
path: route.path,
name: toCamelCase(route.path, true),
redirect: route.redirect,
meta: meta
}
// 目录
if (route.children) {
data.component = Layout
data.redirect = getRedirect(route.path, route.children)
// 外链
} else if (isUrl(route.path)) {
data = {
path: '/external-link',
component: Layout,
meta: {
name: route.name
},
children: [data]
} as AppRouteRecordRaw
// 菜单
} else {
// 对后端传component组件路径和不传做兼容如果后端传component组件路径那么path可以随便写如果不传component组件路径会根path保持一致
const index = route?.component
? modulesRoutesKeys.findIndex((ev) => ev.includes(route.component))
: modulesRoutesKeys.findIndex((ev) => ev.includes(route.path))
data.component = modules[modulesRoutesKeys[index]]
}
if (route.children) {
data.children = generateRoutes(route.children)
}
res.push(data)
}
return res
}
2022-07-19 22:33:54 +08:00
export const getRedirect = (parentPath: string, children: AppCustomRouteRecordRaw[]) => {
2022-07-18 19:06:37 +08:00
if (!children || children.length == 0) {
return parentPath
}
2022-07-19 22:33:54 +08:00
const path = generateRoutePath(parentPath, children[0].path)
2022-07-18 19:06:37 +08:00
// 递归子节点
2022-07-19 22:33:54 +08:00
if (children[0].children) return getRedirect(path, children[0].children)
2022-07-18 19:06:37 +08:00
}
const generateRoutePath = (parentPath: string, path: string) => {
if (parentPath.endsWith('/')) {
parentPath = parentPath.slice(0, -1) // 移除默认的 /
}
if (!path.startsWith('/')) {
path = '/' + path
}
return parentPath + path
}
export const pathResolve = (parentPath: string, path: string) => {
if (isUrl(path)) return path
const childPath = path.startsWith('/') || !path ? path : `/${path}`
return `${parentPath}${childPath}`.replace(/\/\//g, '/')
}
// 路由降级
export const flatMultiLevelRoutes = (routes: AppRouteRecordRaw[]) => {
const modules: AppRouteRecordRaw[] = cloneDeep(routes)
for (let index = 0; index < modules.length; index++) {
const route = modules[index]
if (!isMultipleRoute(route)) {
continue
}
promoteRouteLevel(route)
}
return modules
}
// 层级是否大于2
const isMultipleRoute = (route: AppRouteRecordRaw) => {
if (!route || !Reflect.has(route, 'children') || !route.children?.length) {
return false
}
const children = route.children
let flag = false
for (let index = 0; index < children.length; index++) {
const child = children[index]
if (child.children?.length) {
flag = true
break
}
}
return flag
}
// 生成二级路由
const promoteRouteLevel = (route: AppRouteRecordRaw) => {
let router: Router | null = createRouter({
routes: [route as RouteRecordRaw],
history: createWebHashHistory()
})
const routes = router.getRoutes()
addToChildren(routes, route.children || [], route)
router = null
route.children = route.children?.map((item) => omit(item, 'children'))
}
// 添加所有子菜单
const addToChildren = (
routes: RouteRecordNormalized[],
children: AppRouteRecordRaw[],
routeModule: AppRouteRecordRaw
) => {
for (let index = 0; index < children.length; index++) {
const child = children[index]
const route = routes.find((item) => item.name === child.name)
if (!route) {
continue
}
routeModule.children = routeModule.children || []
if (!routeModule.children.find((item) => item.name === route.name)) {
routeModule.children?.push(route as unknown as AppRouteRecordRaw)
}
if (child.children?.length) {
addToChildren(routes, child.children, routeModule)
}
}
}
function toCamelCase(str: string, upperCaseFirst: boolean) {
str = (str || '').toLowerCase().replace(/-(.)/g, function (group1: string) {
return group1.toUpperCase()
})
if (upperCaseFirst && str) {
str = str.charAt(0).toUpperCase() + str.slice(1)
}
return str
}