aizuda-web-vue3/src/router/index.ts

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import { AppRouteRecordRaw } from './types'
import useStore from '@/store'

export const Layout = () => import('@/layout/index.vue')

const HOME_URL = '/dashboard'

// 参数说明: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
// 静态路由
export const sysStaticRouter: Array<AppRouteRecordRaw> = [
	{
		path: '/login',
		component: () => import('@/views/login/index.vue'),
		meta: { hidden: true }
	},
	{
		path: '/user_register',
		component: () => import('@/views/login/userRegister.vue'),
		meta: { hidden: true }
	},
	{
		path: '/reset_password',
		component: () => import('@/views/login/resetPassword.vue'),
		meta: { hidden: true }
	},
	// 主入口
	{
		path: '/',
		name: 'mainLayout',
		component: Layout,
		redirect: HOME_URL,
		// redirect: '/dashboard',
		children: [
			// 重定向
			{
				path: '/redirect/:path(.*)',
				meta: { hidden: true },
				component: () => import('@/views/redirect/index.vue')
			},
			{
				path: 'dashboard',
				component: () => import('@/views/dashboard/index.vue'),
				name: 'dashboard',
				meta: { title: 'dashboard', icon: 'icon-homepage', affix: true }
			}
		]
	},
	{
		path: '/profile',
		component: Layout,
		name: 'profile',
		meta: { hidden: true, title: '用户' },
		redirect: '/profile/index',
		children: [
			{
				path: 'index',
				component: () => import('@/views/profile/index.vue'),
				name: 'profileIndex',
				meta: {
					hidden: true,
					title: 'profile',
					icon: 'le-account'
					// parentName: 'mainLayout'
				}
			}
		]
	},
	{
		path: '/flow_create',
		component: Layout,
		name: 'flow_create',
		meta: { hidden: true, title: '创建流程' },
		redirect: '/flow_create/index',
		children: [
			{
				path: 'index',
				component: () => import('@/views/flow/create/index.vue'),
				name: 'flow_create',
				meta: { hidden: true, title: '创建流程', icon: '' }
			}
		]
	}
]

export const sysErrorRoutes = [
	{
		path: '/404',
		component: () => import('@/views/error-page/404.vue'),
		meta: { hidden: true }
	},
	{
		path: '/401',
		component: () => import('@/views/error-page/401.vue'),
		meta: { hidden: true }
	},
	{
		// redirect: '/404',
		path: '/:pathMatch(.*)',
		component: () => import('@/views/error-page/404.vue'),
		meta: { hidden: true }
	}
]
// 展示示例相关菜单
export const localDemoRoutes = !!import.meta.env.DEV
	? [
			// 外部链接
			{
				path: '/external-link',
				component: Layout,
				children: [
					{
						path: 'https://github.com/LanceJiang/Lance-Element-Admin',
						meta: { title: '外部链接', icon: 'icon-link' }
					}
				]
			},
			// 组件示例
			{
				path: '/components',
				component: Layout,
				redirect: '/index',
				children: [
					{
						path: 'index',
						component: () => import('@/views/components/index.vue'),
						name: 'comps',
						meta: { title: 'comps', icon: 'icon-excel' }
					}
				]
			},
			// 表单示例
			{
				/*path: '/form',
		component: Layout,
		// meta: { title: 'Form', icon: 'guide' },
		redirect: '/default',
		children: [
			{
				path: 'default',
				component: () => import('@/views/form/default.vue'),
				name: 'FormDefault',
				meta: { title: 'form', icon: 'icon-guide' }
			}
		]*/
				path: 'default',
				component: () => import('@/views/form/default.vue'),
				name: 'FormDefault',
				meta: { title: 'form', icon: 'icon-guide', parentName: 'mainLayout' }
			},
			// 列表示例
			{
				path: '/table',
				component: Layout,
				redirect: 'default',
				meta: { title: 'table', icon: 'icon-table' },
				children: [
					{
						path: 'default',
						component: () => import('@/views/table/default.vue'),
						name: 'TableDefault',
						meta: { title: 'table' /*, icon: 'table'*/ }
					},
					{
						path: 'multipleHeader',
						component: () => import('@/views/table/multipleHeader.vue'),
						name: 'multipleHeader',
						meta: { title: 'multipleHeader' }
					},
					{
						path: 'treeTable',
						component: () => import('@/views/table/treeTable.vue'),
						name: 'treeTable',
						meta: { title: 'treeTable' }
					},
					{
						path: 'mergeCells',
						component: () => import('@/views/table/mergeCells.vue'),
						name: 'mergeCells',
						meta: { title: 'mergeCells' }
					},
					{
						path: 'footerSummary',
						component: () => import('@/views/table/footerSummary.vue'),
						name: 'footerSummary',
						meta: { title: 'footerSummary' }
					},
					{
						path: 'expandTable',
						component: () => import('@/views/table/expandTable.vue'),
						name: 'expandTable',
						meta: { title: 'expandTable' }
					},
					{
						path: 'resizeParentHeightTable',
						component: () => import('@/views/table/resizeParentHeightTable.vue'),
						name: 'resizeParentHeightTable',
						meta: { title: 'resizeParentHeightTable' }
					}
				]
			},
			{
				// demo演示
				path: '/demo',
				component: 'Layout',
				redirect: '/demo/adminManage',
				meta: { title: 'demo', icon: 'icon-peoples' },
				children: [
					{
						// path: '/demo/pageConfig',
						path: 'pageConfig',
						// component: () => import('@/views/demo/pageConfig/index'),
						component: 'demo/pageConfig/index',
						name: 'pageConfig',
						meta: { title: 'demo_pageConfig', icon: 'le-fangda1' }
					},
					{
						// 管理员管理
						// path: '/demo/adminManage',
						path: 'adminManage',
						name: 'adminManage',
						component: 'demo/adminManage/index',
						meta: { title: 'demo_adminManage', icon: 'Setting' }
					}
				]
			},
			{
				path: '/menuNested',
				name: 'menuNested',
				component: 'Layout',
				redirect: '/menuNested/menu1',
				meta: {
					icon: 'List',
					title: '菜单嵌套'
				},
				children: [
					{
						path: '/menuNested/menu1',
						name: 'menu1',
						component: 'menuNested/menu1/index',
						meta: {
							icon: 'Menu',
							title: '菜单1'
						}
					},
					{
						path: '/menuNested/menu2',
						name: 'menu2',
						redirect: '/menuNested/menu2/menu21',
						component: 'RouteView',
						meta: {
							icon: 'Menu',
							title: '菜单2'
							// parentName: 'mainLayout'
						},
						children: [
							{
								path: '/menuNested/menu2/menu21',
								// path: 'menu21',
								name: 'menu21',
								component: 'menuNested/menu2/menu21/index',
								meta: {
									icon: 'Menu',
									title: '菜单2-1'
								}
							},
							...Array.from({ length: 50 }).map((_, i) => {
								return {
									path: '/menuNested/menu2/menu23' + i,
									name: 'menu23_' + i,
									component: 'menuNested/menu2/menu23/index',
									meta: {
										icon: 'Menu',
										title: '菜单2-3_' + i
									}
								}
							}),
							{
								path: '/menuNested/menu2/menu22',
								// path: 'menu22',
								name: 'menu22',
								component: 'RouteView',
								redirect: '/menuNested/menu2/menu22/menu221',
								meta: {
									icon: 'Menu',
									title: '菜单2-2'
								},
								children: [
									{
										path: '/menuNested/menu2/menu22/menu221',
										// path: 'menu221',
										name: 'menu221',
										component: 'menuNested/menu2/menu22/menu221/index',
										meta: {
											icon: 'Menu',
											title: '菜单2-2-1'
										}
									},
									{
										path: '/menuNested/menu2/menu22/menu222',
										// path: 'menu222',
										name: 'menu222',
										component: 'menuNested/menu2/menu22/menu222/index',
										meta: {
											icon: 'Menu',
											title: '菜单2-2-2'
										}
									},
									...Array.from({ length: 50 }).map((_, i) => {
										return {
											path: '/menuNested/menu2/menu22/menu222' + i,
											// path: 'menu222',
											name: 'menu222_' + i,
											component: 'menuNested/menu2/menu22/menu222/index',
											meta: {
												icon: 'Menu',
												title: '菜单2-2-2' + i
											}
										}
									})
								]
							},
							{
								path: '/menuNested/menu2/menu23',
								// path: 'menu23',
								name: 'menu23',
								component: 'menuNested/menu2/menu23/index',
								meta: {
									icon: 'Menu',
									title: '菜单2-3'
								}
							} /*,
						...Array.from({length: 50}).map((_, i) => {
							return {
								path: '/menuNested/menu2/menu23' + i,
								name: 'menu23' + i,
								component: 'menuNested/menu2/menu23/index',
								meta: {
									icon: 'Menu',
									title: '菜单2-3' + i
								}
							}
						})*/
						]
					},
					{
						path: '/menuNested/menu3',
						name: 'menu3',
						component: 'menuNested/menu3/index',
						meta: {
							icon: 'Menu',
							title: '菜单3'
						}
					}
				]
			}
	  ]
	: []

export const constantRoutes: AppRouteRecordRaw[] = [
	// 首页
	{
		// path: '/dashboard',
		path: HOME_URL,
		component: () => import('@/views/dashboard/index.vue'),
		name: 'dashboard',
		meta: { title: 'dashboard', icon: 'icon-homepage', affix: true, parentName: 'mainLayout' }
	},
	// ...localDemoRoutes,
	// 用户
	{
		path: '/profile',
		component: Layout,
		name: 'profile',
		meta: { hidden: true, title: '用户' },
		redirect: '/profile/index',
		children: [
			{
				path: 'index',
				component: () => import('@/views/profile/index.vue'),
				name: 'profileIndex',
				meta: {
					hidden: true,
					title: 'profile',
					icon: 'le-account'
					// parentName: 'mainLayout'
				}
			}
		]
	}
	/*// 仅用于研发测试 START
	{
		path: '/test',
		component: Layout,
		// meta: {hidden: true, title: 'test', icon: 'system'},
		meta: { title: 'test', icon: 'system' },
		redirect: '/test/testSetup',
		children: [
			{
				path: 'testSetup',
				component: () => import('@/views/test/testSetup.vue'),
				name: 'testSetup',
				meta: { title: 'testSetup' }
			},
			{
				path: 'componentCommunication',
				component: () => import('@/views/test/componentCommunication/index.vue'),
				name: 'componentCommunication',
				meta: { title: '组件通信方式' }
			}
		]
	}
	// 仅用于研发测试 END*/
]

/**
 * local_permissionsMenuList: 每次有新的路由配置 请做好标注!!!
 * 本地 dev 调试 默认使用本地路由数据
 * (若想要调试 接口数据 请在 env.development.local 修改 VITE_APP_USE_LOCAL_ROUTES 不为 1即可)
 */
export const local_permissionsMenuList: Array<AppRouteRecordRaw> = [
	...constantRoutes,
	// 设置 权限
	{
		path: '/setting',
		component: 'Layout',
		meta: { title: '设置', icon: 'icon-swagger' },
		redirect: '/setting/user',
		children: [
			{
				path: 'user',
				// component: () => import('@/views/setting/user/index1.vue'),
				component: 'setting/user/index',
				name: 'user',
				meta: { title: '用户管理', icon: 'icon-logo' } // 本地icon
			},
			{
				path: 'role',
				// component: () => import('@/views/setting/role/index1.vue'),
				component: 'setting/role/index',
				name: 'role',
				meta: { title: '角色管理', icon: 'le-amazon' } // le-iconfont
			},
			{
				path: 'post',
				// component: () => import('@/views/setting/post/index1.vue'),
				component: 'setting/post/index',
				name: 'post',
				meta: { title: '岗位管理', icon: '' }
			},
			{
				path: 'app',
				// component: () => import('@/views/setting/app/index1.vue'),
				component: 'setting/app/index',
				name: 'app',
				meta: { title: '应用管理', icon: '' }
			},

			{
				path: 'department',
				// component: () => import('@/views/setting/department/index1.vue'),
				component: 'setting/department/index',
				name: 'department',
				meta: { title: '部门管理', icon: '' }
			},
			{
				path: 'region',
				// component: () => import('@/views/setting/region/index1.vue'),
				component: 'setting/region/index',
				name: 'region',
				meta: { title: '行政区域', icon: '' }
			},
			{
				path: 'configure',
				// component: () => import('@/views/setting/configure/index1.vue'),
				component: 'setting/configure/index',
				name: 'configure',
				meta: { title: '扩展配置', icon: '' }
			},
			{
				path: 'dict',
				// component: () => import('@/views/setting/dict/index1.vue'),
				component: 'setting/dict/index',
				name: 'dict',
				meta: { title: '字典管理', icon: '' }
			},
			{
				path: 'menu',
				component: () => import('@/views/setting/menu/index.vue'),
				// component: 'setting/menu/index',
				name: 'menu',
				meta: { title: '菜单管理', icon: 'PriceTag' } // element icons
			}
		]
	},
	// 流程管理 权限
	{
		path: '/flow',
		// component: Layout,
		component: '',
		meta: { title: '流程管理', icon: 'icon-guide' },
		redirect: '/flow/group',
		children: [
			{
				path: 'group1',
				// component: () => import('@/views/flow/group/index1.vue'),
				component: 'flow/group/index1',
				name: 'flow_group1',
				meta: { title: '流程组', icon: '' }
			},
			{
				path: 'group',
				// component: () => import('@/views/flow/group/index1.vue'),
				component: 'flow/group/index',
				name: 'flow_group',
				meta: { title: '流程组 - ui调整', icon: '' }
			},
			{
				path: 'form',
				// component: () => import('@/views/flow/form/index1.vue'),
				component: 'flow/form/index',
				name: 'flow_form',
				meta: { title: '流程表单', icon: '' }
			},
			{
				path: 'create',
				// component: () => import('@/views/flow/create/index1.vue'),
				component: 'flow/create/index',
				name: 'flow_create',
				meta: { title: '创建流程', icon: '' }
			},
			{
				path: 'task',
				// component: () => import('@/views/flow/task/index1.vue'),
				component: 'flow/task/index',
				name: 'flow_task',
				meta: { title: '流程任务', icon: '' }
			},
			{
				path: 'instance',
				// component: () => import('@/views/flow/instance/index1.vue'),
				component: 'flow/instance/index',
				name: 'flow_instance',
				meta: { title: '流程实例', icon: '' }
			},
			{
				path: 'modal',
				// component: () => import('@/views/flow/modal/index1.vue'),
				component: 'flow/modal/index',
				name: 'flow_modal',
				meta: { title: '流程模型', icon: '' }
			}
		]
	}
	// todo 请添加相关新路由描述
]

// 创建路由
const router = createRouter({
	history: createWebHashHistory(),
	routes: sysStaticRouter.concat(sysErrorRoutes) as RouteRecordRaw[],
	// 刷新时，滚动条位置还原
	scrollBehavior: () => ({ left: 0, top: 0 })
})

// 重置路由
export function resetRouter() {
	const { permission } = useStore()
	permission.showMenuListFlat.forEach(route => {
		const name = route.name
		if (name && router.hasRoute(name)) {
			router.removeRoute(name)
		}
	})
}

export default router