创建动态路由表
当需要进行 用户权限处理,我们需要先对路由表进行一个划分:
- 私有路由表 privateRoutes :权限路由,根据meta判断是否有权限进入
- 公有路由表 publicRoutes:无权限路由
/*eslint-disable*/ import { createRouter, createWebHashHistory } from 'vue-router' import layout from '@/layout' /** * 私有路由表 */ const privateRoutes = [{ path: '/user', component: layout, redirect: '/user/manage', meta: { title: 'user', icon: 'personnel' }, children: [{ path: '/user/manage', component: () => import('@/views/user-manage/index'), meta: { title: 'userManage', icon: 'personnel-manage' } }, { path: '/user/role', component: () => import('@/views/role-list/index'), meta: { title: 'roleList', icon: 'role' } }, { path: '/user/permission', component: () => import('@/views/permission-list/index'), meta: { title: 'permissionList', icon: 'permission' } }, { path: '/user/info/:id', name: 'userInfo', component: () => import('@/views/user-info/index'), meta: { title: 'userInfo' } }, { path: '/user/import', name: 'import', component: () => import('@/views/import/index'), meta: { title: 'excelImport' } } ] }, { path: '/article', component: layout, redirect: '/article/ranking', meta: { title: 'article', icon: 'article' }, children: [{ path: '/article/ranking', component: () => import('@/views/article-ranking/index'), meta: { title: 'articleRanking', icon: 'article-ranking' } }, { path: '/article/:id', component: () => import('@/views/article-detail/index'), meta: { title: 'articleDetail' } }, { path: '/article/create', component: () => import('@/views/article-create/index'), meta: { title: 'articleCreate', icon: 'article-create' } }, { path: '/article/editor/:id', component: () => import('@/views/article-create/index'), meta: { title: 'articleEditor' } } ] } ] /** * 公有路由表 */ const publicRoutes = [{ path: '/login', component: () => import('@/views/login/index.vue') }, { path: '/', component: () => layout, redirect: '/profile', children: [{ path: '/profile', name: 'profile', component: () => import('@/views/profile/index'), meta: { title: 'profile', icon: 'el-icon-user' } }, { path: '/404', name: '404', component: () => import('@/views/error-page/404') }, { path: '/401', name: '401', component: () => import('@/views/error-page/401') } ] }] const router = createRouter({ history: createWebHashHistory(), routes: [...publicRoutes, ...privateRoutes] }) export default router