vue3 根据菜单，创建动态路由

App.vue:

<template>
	<div id="app">
		<router-view />
	</div>
</template>

main.vue:

 

<template>
	<el-container class="home-container w1300">
		<!-- 顶部区域 -->
		<el-header class="header">
			<navBar></navBar>
		</el-header>

		<el-container>
			<el-aside>
				<sidebar></sidebar>
			</el-aside>
			<el-main>
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>

<script setup>
	import sidebar from "../components/main_sidebar.vue"
	import navBar from "../components/main_navBar.vue"
</script>

<style lang="scss" scoped>
	@import '@/assets/style/common.scss';

	.home-container {
		height: 100%;
	}

	.header {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		width: 100%;
		height: 50px;
		padding: 0;
		box-shadow: 0px 0px 0.05rem 0px rgba(0, 18, 49, 0.3);
		background-color: $primary;

	}

	.el-aside {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		padding-top: 50px;
		height: 100%;
		width: 250px;
		overflow-y: scroll;
		overflow-x: hidden;
		background-color: $primary;
	}

	.el-aside::-webkit-scrollbar {
		display: none;
	}

	.el-main {
		padding: 74px 24px 24px 274px;
		background-color: #EDF1FF;
	}
</style>

 1、本地菜单：如果后台返回菜单就使用后台的菜单，否则使用本地菜单；保存到store

export function saveMenus(store, sideMenus = localMenus) {
	store.commit("setSideMenus", sideMenus);
}

let localMenus = [{
	path: "/main",
	comp: 'views/main',
	meta: { title: "积分商城", icon: '', isMenu: false },
	redirect: { name: 'summary_index' },
	children: [{
			path: "summary/index",
			comp: "views/summary/summary",
			meta: { title: "概况", icon: '', isMenu: true },
		},
		{
			meta: { title: "基础管理", icon: '', isMenu: true },
			children: [{
					path: "base/createMall",
					comp: "views/base/createMall/createMall",
					meta: { title: "积分商城装修", icon: '', isMenu: true }
				},
				{
					path: "base/integralSetting",
					comp: "views/base/integralSetting/integralSetting",
					meta: { title: "积分兑换设置", icon: '', isMenu: true }
				}
			]
		},
		{
			meta: { title: "礼品兑换管理", icon: '', isMenu: true },
			children: [{
					path: "gift/giftList",
					comp: "views/gift/giftList/giftList",
					meta: { title: "礼品兑换列表", icon: '', isMenu: true }
				},
				{
					path: "gift/category",
					comp: "views/gift/category/category",
					meta: { title: "礼品兑换分类", icon: '', isMenu: true }
				}
			]
		},
		{

			meta: { title: "数据统计", icon: '', isMenu: true },
			children: [{
					path: "static/exchange",
					comp: "views/static/exchange/exchange",
					meta: { title: "兑换分析", icon: '', isMenu: true }
				},
				{
					path: "static/gift",
					comp: "views/static/parse/parse",
					meta: { title: "礼品分析", icon: '', isMenu: true }
				}
			]
		},
	]
}]

if (process.env.NODE_ENV === 'dev') {
	localMenus[0].children.push({
		meta: { title: "demo", icon: '', isMenu: true },
		children: [{
			path: "demo/globalComponents",
			comp: "views/demo/globalComponents",
			meta: { title: "全局组件", icon: '', isMenu: true },
		}, {
			path: "demo/ajax",
			comp: "views/demo/ajax",
			meta: { title: "网络请求", icon: '', isMenu: true },
		}, {
			path: "demo/demo_echart",
			comp: "views/demo/demo_echart",
			meta: { title: "echart使用", icon: '', isMenu: true },
		}]
	})
}

export function saveMenus(store, sideMenus = localMenus) {
	store.commit("setSideMenus", sideMenus);
}


export function generatorRoute(store) {
	let routes = [],
		menus = store.state.sideMenus;

	menus.forEach(item => {

		let parent = routeformat(item);
		if (item.children && item.children.length > 0) {
			toRoute(parent, item.children)
		}
		routes.push(parent)
	})
	return routes;
}

function toRoute(parent, children) {
	children.forEach(item => {
		if (item.children && item.children.length > 0) {
			toRoute(parent, item.children);
		} else {
			let cRoute = routeformat(item);
			if (parent.children) {
				parent.children.push(cRoute)
			} else {
				parent.children = [cRoute]
			}
		}
	})
}

function routeformat(raw) {
	return {
		path: raw.path,
		meta: raw.meta || "",
		redirect: raw.redirect || "",
		name: raw.path.replace('/', '_'),
		component: () => import(`@/${raw.comp}.vue`)
	}
}

2、 路由人口：

import { createRouter, createWebHistory } from 'vue-router'
import Cookies from 'js-cookie'
import store from '../store';
import http from '../utils/httpClient';
import demain from '../utils/demain.js'
import { generatorRoute, saveMenus } from "./permission.js"

export const routes = [{
		path: "/",
		redirect: '/main',
	},
	{ path: '/:pathMatch(.*)', name: '404', component: () => import('../views/404.vue') },
]
if (process.env.NODE_ENV === 'dev') {
	routes.unshift({ path: "/login", name: 'login', component: () => import('../views/demo/login.vue') })
}
const router = createRouter({
	history: createWebHistory(),
	routes
})

router.beforeEach(async (to, from, next) => {
	if (isLogin()) {
		if (store.state.hasAuth) {
			next();
		} else {
			// 从远程服务器中获取路由及权限
			let menus = await getPermission();
			saveMenus(store, menus);
			let dynamicRoutes = generatorRoute(store);
			dynamicRoutes.forEach(item => router.addRoute(item))
			next({ path: to.path })
		}
	} else {
		if (process.env.NODE_ENV === 'dev') {
			if (to.path === '/login') {
				next();
			} else {
				next({ path: '/login' })
			}
		} else {
			location.href = process.env.VUE_APP_localhost + "/login"
		}
	}
});

function isLogin() {
	let access_token = Cookies.get("access_token"),
		userInfo = Cookies.get("userInfo"),
		nav = Cookies.get("nav"),
		nav2 = Cookies.get("nav");
	return access_token && nav && nav2 && userInfo && true;
}

async function getPermission() {
	// let url = "/system/v3/menu/permList?perm=exchange"
	// let resp = await http.get(url, demain.basic);
	// if (resp.code === 200) {
	// 	// 目前的数据结构不合理 暂时不用
	// 	// console.log(resp.data);
	// 	return undefined;
	// } else {
	// 	return undefined
	// }
}


export default router