创建动态路由表

当需要进行 用户权限处理，我们需要先对路由表进行一个划分：

1. 私有路由表 privateRoutes ：权限路由，根据meta判断是否有权限进入
2. 公有路由表 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

标签：views,创建,component,meta,path,import,article,动态,路由表
来源： https://www.cnblogs.com/JianXin1994/p/16168142.html