vue实现动态路由

1、定义路由注册表表（注意定义返回数据不符合要求的内容）

// 视图组件
const view = {
	Layout: () => import('@/layouts/Main.vue'),
	parentView: () => import('@/layouts/parentView'),
}

// 路由组件注册
export const routerMap = {
	'demo/home': {
		title: '首页',
		component: view.Layout,
	},
	'chdfc/code': {
		title: '内容',
		component: () => import('-----路径'),
	},
}

2、解析后端返回的路由表生成符合vue-router的路由集合

/**
 * 根据 路由集合 和 路由组件注册 解析路由
 * @param routesList 路由集合
 * @param routerMap 本地路由组件注册配置
 */
export function parseRoutes(routesList, routerMap) {
	let routes = []
	routesList.forEach((item) => {
		// 获取注册在 routerMap 中的 router，初始化 routeCfg
		let router = undefined
		let routeItem = {}

		if (typeof item === 'string') {
			router = routerMap[item]
			routeItem = { path: router.path || item }
		} else if (typeof item === 'object') {
			router = routerMap[item.name]
			routeItem = item
		}

		if (!router) {
			console.warn(`can't find register for router ${routeItem.router}, please register it in advance.`)
			router = typeof item === 'string' ? { path: item, name: item } : item
		}

		// 从 router 和 routeItem 解析路由
		const route = {
			path: routeItem.path || router.path,
			name: routeItem.name || router.name,
			component: router.component,
			redirect: routeItem.homeUrl || router.homeUrl,
			meta: {
				title: routeItem.title || router.title || routeItem.meta?.title || router.meta?.title,
				icon: routeItem.icon || router.icon || routeItem.meta?.icon || router.meta?.icon,
				requiresAuth: routeItem.requiresAuth || router.requiresAuth || routeItem.meta?.requiresAuth || router.meta?.requiresAuth || false,
				hideInBread: routeItem.hideInBread || router.hideInBread || routeItem.meta?.hideInBread || router.meta?.hideInBread || false,
			},
			children: router.children || [],
		}

		if (routeItem.children && routeItem.children.length > 0) {
			route.children = parseRoutes(routeItem.children, routerMap)
		}
		routes.push(route)
	})
	return routes
}

/**
 * 合并路由
 * @param target {Route[]}
 * @param source {Route[]}
 * @returns {Route[]}
 */
export function mergeRoutes(target, source) {
	const routesMap = {}
	target.forEach((item) => (routesMap[item.path] = item))
	source.forEach((item) => (routesMap[item.path] = item))
	return Object.values(routesMap)
}

3、静态路由和动态路由合并

const router = createRouter({
	history: createWebHashHistory(),
	routes: mergeRoutes(routes, parseRoutes(menuData, routerMap)),
})