route-view的使用

92 阅读2分钟
// eslint-disable-next-line
import { UserLayout, BasicLayout } from '@/layouts'
import { bxAnaalyse } from '@/core/icons'

const RouteView = {
  name: 'RouteView',
  render: h => h('router-view'),
}

export const asyncRouterMap = [
  {
    path: '/',
    name: 'index',
    component: BasicLayout,
    meta: {
      title: '首页',
    },
    redirect: '/permission',
    children: [
      // dashboard
      // {
      //   path: '/dashboard',
      //   name: 'dashboard',
      //   component: RouteView,
      //   meta: {
      //     title: '平台预览',
      //     icon: bxAnaalyse,
      //     permission: ['dashboard'],
      //   },
      //   redirect: '/dashboard/Index',
      //   children: [
      //     {
      //       path: '/dashboard/Index',
      //       name: 'Index',
      //       component: () => import('@/views/dashboard/Index'),
      //       meta: { title: '首页', keepAlive: true, permission: ['dashboard'] },
      //     },
      //   ],
      // },
      // permission
      {
        path: '/permission',
        name: 'permission',
        component: RouteView,
        meta: {
          title: '权限管理',
          icon: 'solution',
          permission: ['/permission'],
        },
        redirect: '/permission/user',
        children: [
          {
            path: '/permission/user',
            name: 'user',
            component: () => import(/* webpackChunkName: "permission" */ '@/views/permission/user'),
            meta: { title: '用户管理', permission: ['/permission/user'] },
          },
          {
            path: '/permission/role',
            name: 'role',
            component: () => import(/* webpackChunkName: "permission" */ '@/views/permission/role'),
            meta: { title: '角色管理', permission: ['/permission/role'] },
          },
          {
            path: '/permission/menu',
            name: 'menu',
            component: () => import(/* webpackChunkName: "permission" */ '@/views/permission/menu'),
            meta: { title: '菜单管理', permission: ['/permission/menu'] },
          },
          {
            path: '/permission/interface',
            name: 'interface',
            component: () => import(/* webpackChunkName: "permission" */ '@/views/permission/interface'),
            meta: { title: '接口管理', permission: ['/permission/interface'] },
          },
        ],
      },
      // system
      {
        path: '/system',
        name: 'system',
        component: RouteView,
        meta: {
          title: '系统管理',
          icon: bxAnaalyse,
          permission: ['/system'],
        },
        redirect: '/system/dictionary',
        children: [
          {
            path: '/system/dictionary',
            name: 'dictionary',
            component: () => import(/* webpackChunkName: "system" */ '@/views/system/system'),
            meta: { title: '系统字典', permission: ['/system/dictionary'] },
          },
          {
            path: '/system/business',
            name: 'businessDictionary',
            component: () => import(/* webpackChunkName: "system" */ '@/views/system/business'),
            meta: { title: '业务字典', permission: ['/system/business'] },
          },
          {
            path: '/system/config',
            name: 'dictionaryConfig',
            hidden: true,
            component: () => import(/* webpackChunkName: "system" */ '@/views/system/config'),
            meta: { title: '字典配置', permission: ['/system/config'] },
          },
          {
            path: '/system/log',
            name: 'operationLog',
            component: () => import(/* webpackChunkName: "system" */ '@/views/system/log'),
            meta: { title: '用户操作日志', permission: ['/system/log'] },
          },
        ],
      },
      // message
      {
        path: '/message',
        name: 'message',
        component: RouteView,
        meta: {
          title: '消息管理',
          icon: 'message',
          permission: ['/message'],
        },
        redirect: '/message/message',
        children: [
          {
            path: '/message/template',
            name: 'template',
            component: () => import(/* webpackChunkName: "message" */ '@/views/message/template'),
            meta: { title: '消息模板', permission: ['/message/template'] },
          },
          {
            path: '/message/outbox',
            name: 'outboxConfig',
            component: () => import(/* webpackChunkName: "message" */ '@/views/message/outbox'),
            meta: { title: '发件箱配置', permission: ['/message/outbox'] },
          },
          {
            path: '/message/group',
            name: 'groupConfig',
            component: () => import(/* webpackChunkName: "message" */ '@/views/message/group'),
            meta: { title: '接收组配置', permission: ['/message/group'] },
          },
        ],
      },
      // Exception
      {
        path: '/exception',
        name: 'exception',
        component: RouteView,
        redirect: '/exception/403',
        meta: {
          title: '异常页',
          icon: 'warning',
          permission: ['exception'],
        },
        children: [
          {
            path: '/exception/403',
            name: 'Exception403',
            component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/403'),
            meta: {
              title: '403',
              permission: ['exception'],
            },
          },
          {
            path: '/exception/404',
            name: 'Exception404',
            component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404'),
            meta: {
              title: '404',
              permission: ['exception'],
            },
          },
          {
            path: '/exception/500',
            name: 'Exception500',
            component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/500'),
            meta: {
              title: '500',
              permission: ['exception'],
            },
          },
        ],
      },
    ],
  },
  // 开启权限,全局重定向要注释
  // {
  //   path: '*',
  //   redirect: '/',
  //   hidden: true,
  // },
]

/**
 * 基础路由
 * @type { *[] }
 */
export const constantRouterMap = [
  {
    path: '/403',
    component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/403'),
  },
  {
    path: '/404',
    component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404'),
  },
  {
    path: '/user',
    component: UserLayout,
    redirect: '/login',
    children: [
      {
        path: 'login',
        name: 'login',
        component: () => import(/* webpackChunkName: "user" */ '@/views/user/Login'),
      },
    ],
  },
]