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

App.vue:

main.vue:

 

 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