@eim-materials/eim-pc-admin-lite/src/router.js

该模板适用于从 0 到 1 开始搭建项目，内置基础的页面，路由和菜单展示。

import Vue from 'vue';
import Router from 'vue-router';
import routerConfig from './routerConfig';
import { asideMenuConfig } from './menuConfig';

const SubAppMain = () => import('@/components/Layout/SubAppMain');
const Login = () => import('@/pages/login/index');
const Error404 = () => import('@/pages/errorpage/404');
const Error403 = () => import('@/pages/errorpage/403');
const Error500 = () => import('@/pages/errorpage/500');

Vue.use(Router);

const defaultRouterMap = [
  {
    path: '/',
    redirect: '/login',
    hidden: true,
  },
  {
    path: '/login',
    name: 'login',
    component: Login,
    hidden: true,
  },
  {
    path: '/404',
    name: '404',
    component: Error404,
    hidden: true,
  },
  {
    path: '/403',
    name: '403',
    component: Error403,
    hidden: true,
  },
  {
    path: '/500',
    name: '500',
    component: Error500,
    hidden: true,
  },
  { name: 'except', path: '*', redirect: '/404', hidden: true },
];

const createRouterMap = [];

const roleTree = [{
  id: 'all',
  name: '所有权限',
  children: [],
}];

function generateFirstLevelMenu(menu, route) {
  const { pathId, name, path, icon, hidden, parent, iframeParam } = menu;
  const { layout, component } = route;
  const router = {
    path,
    component: layout,
    name,
    children: [{
      path: 'index',
      name: pathId,
      component,
      meta: {
        title: name,
        icon,
        parent,
        iframeParam,
      },
      hidden,
    }],
  };
  const role = {
    id: pathId,
    name: parent ? `${parent}/${name}` : name,
  };
  createRouterMap.push(router);
  roleTree[0].children.push(role);
}

function generateSecondLevelMenu(menu, route) {
  const { pathId, name, path, icon, hidden, parent, iframeParam } = menu;
  const { layout, component } = route;
  const nameArr = name.split('/');
  const pathArr = path.split('/');
  const iconArr = icon.split('/');
  const childRouter = {
    path: pathArr[2],
    // name: nameArr[1],
    name: pathId,
    component,
    meta: {
      title: nameArr[1],
      icon: iconArr[1],
      parent,
      iframeParam,
    },
    hidden,
  };
  const childRole = {
    id: pathId,
    name: parent ? `${parent}/${nameArr[1]}` : nameArr[1],
  };
  let index = 0;
  if (createRouterMap.some((ele, idx) => {
    index = idx;
    return ele.name === nameArr[0];
  })) {
    createRouterMap[index].children.push(childRouter);
    roleTree[0].children[index].children.push(childRole);
  } else {
    const router = {
      path: `/${pathArr[1]}`,
      component: layout,
      name: nameArr[0],
      redirect: path,
      meta: {
        title: nameArr[0],
        icon: iconArr[0],
      },
      children: [
        childRouter,
      ],
    };
    const role = {
      id: name,
      name: nameArr[0],
      children: [
        childRole,
      ],
    };
    createRouterMap.push(router);
    roleTree[0].children.push(role);
  }
}

function generateThirdLevelMenu(menu, route) {
  const { pathId, name, path, icon, hidden, parent, iframeParam } = menu;
  const { layout, component } = route;
  const nameArr = name.split('/');
  const pathArr = path.split('/');
  const iconArr = icon.split('/');
  const grandChildRouter = {
    path: pathArr[3],
    // name: nameArr[2],
    name: pathId,
    component,
    meta: {
      title: nameArr[2],
      icon: iconArr[2],
      parent,
      iframeParam,
    },
    hidden,
  };
  const grandChildRole = {
    id: pathId,
    name: parent ? `${parent}/${nameArr[2]}` : nameArr[2],
  };
  const childRouter = {
    path: pathArr[2],
    name: nameArr[1],
    component: SubAppMain,
    redirect: path,
    meta: {
      title: nameArr[1],
      icon: iconArr[1],
    },
    children: [
      grandChildRouter,
    ],
  };
  const childRole = {
    id: nameArr[0] + nameArr[1],
    name: nameArr[1],
    children: [
      grandChildRole,
    ],
  };
  let index = 0;
  if (createRouterMap.some((ele, idx) => {
    index = idx;
    return ele.name === nameArr[0];
  })) {
    let childIndex = 0;
    if (createRouterMap[index].children && createRouterMap[index].children.some((ele, idx) => {
      childIndex = idx;
      return ele.name === nameArr[1];
    })) {
      createRouterMap[index].children[childIndex].children.push(grandChildRouter);
      roleTree[0].children[index].children[childIndex].children.push(grandChildRole);
    } else {
      createRouterMap[index].children.push(childRouter);
      roleTree[0].children[index].children.push(childRole);
    }
  } else {
    const router = {
      path: `/${pathArr[1]}`,
      component: layout,
      name: nameArr[0],
      redirect: path,
      meta: {
        title: nameArr[0],
        icon: iconArr[0],
      },
      children: [
        childRouter,
      ],
    };
    const role = {
      id: name,
      name: nameArr[0],
    };
    createRouterMap.push(router);
    roleTree[0].children.push(role);
  }
}

asideMenuConfig.forEach((menu) => {
  // 获取菜单信息,以/ 分割，如/example/chart => 会拆分为example和chart两级菜单
  const menuArr = menu.name.split('/');
  const length = menuArr.length;
  const route = routerConfig.find(routeItem => routeItem.path === menu.path);
  switch (length) {
    case 1:
      generateFirstLevelMenu(menu, route);
      break;
    case 2:
      generateSecondLevelMenu(menu, route);
      break;
    case 3:
      generateThirdLevelMenu(menu, route);
      break;
    default:
  }
});

export const menuConfig = createRouterMap;

export const roleTreeConfig = roleTree;

export const constantRouterMap = [...defaultRouterMap, ...createRouterMap];

export default new Router({
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRouterMap,
});