路由和菜单是组织起一个应用的关键骨架，在项目中的路由为了方便管理，使用了中心化的方式，在 router.config.js 统一配置和管理（另外，我们也提供了完全动态从后端加载的解决方案，可至本文末尾查看）—默认的静态实现方案，目前已停用，采用了动态实现。

基本结构

在这一部分，脚手架通过结合一些配置文件、基本算法及工具函数，搭建好了路由和菜单的基本框架，主要涉及以下几个模块/功能：

  • 路由管理 通过约定的语法根据在router.config.js 中配置路由。
  • 菜单生成 根据路由配置来生成菜单。菜单项名称，嵌套路径与路由高度耦合。
  • 面包屑 组件 PageHeaderWrapper 中内置的面包屑也可由脚手架提供的配置信息自动生成。

下面简单介绍下各个模块的基本思路，如果你对实现过程不感兴趣，可以进一步了解，或者直接选择忽略。

路由介绍

目前脚手架中所有的路由都通过router.config.js 来统一管理，在 vue-router 的配置中我们增加了一些参数，如 hideChildrenInMenu,meta.title,meta.icon,meta.permission，来辅助生成菜单。其中：

  • hideChildrenInMenu 用于隐藏不需要在菜单中展示的子路由。用法可以查看 个人设置 的配置。
  • meta.title 和 meta.icon分别代表生成菜单项的文本和图标。
  • meta.permission 用来配置这个路由的权限，如果配置了将会验证当前用户的权限，并决定是否展示 *（默认情况下）。

路由数据/权限控制说明

重点：路由动态的权限是由：permission: [‘system’]来控制的，system可理解为角色id，如果用户拥有多个角色id可以写成：permission: [‘system’,’admin’,…]
附上router源码：

  1. import { BasicLayout, UserLayout } from '@/layouts'
  3. const RouteView = {
  4.   name: 'RouteView',
  5.   render: (h) => h('router-view'),
  6. }
  8. export const constantRouterMap = [
  9.   {
  10.     path: '/user',
  11.     name: 'user',
  12.     component: UserLayout,
  13.     children: [
  14.       {
  15.         path: '/user/login',
  16.         name: 'login',
  17.         component: () => import('@/views/user/Login'),
  18.       },
  19.     ],
  20.   },
  21.   {
  22.     path: '/404',
  23.     component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404'),
  24.   },
  25. ]
  27. export const asyncRouterMap = [
  28.   {
  29.     path: '/',
  30.     name: 'index',
  31.     component: BasicLayout,
  32.     meta: { title: 'menu.home' },
  33.     redirect: '/dashboard/welcome',
  34.     children: [
  35.       // dashboard
  36.       {
  37.         path: '/dashboard',
  38.         name: 'dashboard',
  39.         redirect: '/dashboard/welcome',
  40.         component: RouteView,
  41.         meta: { title: 'menu.dashboard.default', keepAlive: true, icon: 'dashboard', permission: ['dashboard'] },
  42.         children: [
  43.           {
  44.             path: '/dashboard/welcome',
  45.             name: 'Welcome',
  46.             component: () => import('@/views/dashboard/Welcome'),
  47.             meta: { title: 'menu.dashboard.welcome', keepAlive: false, permission: ['dashboard'] },
  48.           },
  49.           {
  50.             path: 'https://www.baidu.com/',
  51.             name: 'Monitor',
  52.             meta: { title: 'menu.dashboard.monitor', target: '_top' }
  53.           },
  54.         ],
  55.       },
  56.       {
  57.         path: '/system',
  58.         name: 'system',
  59.         redirect: '/system/user',
  60.         component: RouteView,
  61.         meta: { title: 'menu.system.default', keepAlive: true, icon: 'dashboard', permission: ['system'] },
  62.         children: [
  63.           {
  64.             path: '/system/user',
  65.             name: 'User',
  66.             component: RouteView,
  67.             meta: { title: 'menu.system.user', keepAlive: false, permission: ['system'] },
  68.             children: [
  69.               {
  70.                 path: '/system/user',
  71.                 name: 'User',
  72.                 component: () => import('@/views/system/User/Index'),
  73.                 meta: { title: 'menu.system.user', keepAlive: false, permission: ['system'] },
  74.               },
  75.               {
  76.                 path: '/system/wl',
  77.                 name: 'Wl',
  78.                 redirect: 'http://www.baidu.com',
  79.                 meta: { title: '测试外链', keepAlive: false, permission: ['system'] },
  80.               }
  81.             ]
  82.           },
  83.           {
  84.             path: '/system/organize',
  85.             name: 'Organize',
  86.             component: () => import('@/views/system/Organize/Index'),
  87.             meta: { title: 'menu.system.organize', keepAlive: false, permission: ['system'] },
  88.           },
  89.           {
  90.             path: '/system/role',
  91.             name: 'Role',
  92.             component: () => import('@/views/system/Role/Index'),
  93.             meta: { title: 'menu.system.role', keepAlive: false, permission: ['system'] },
  94.           },
  95.           {
  96.             path: '/system/dictionary',
  97.             name: 'Dictionary',
  98.             component: () => import('@/views/system/Dictionary/Index'),
  99.             meta: { title: 'menu.system.dictionary', keepAlive: false, permission: ['system'] },
  100.           },
  101.           {
  102.             path: '/system/menu',
  103.             name: 'Menu',
  104.             component: () => import('@/views/system/Menu/Index'),
  105.             meta: { title: 'menu.system.menu', keepAlive: false, permission: ['system'] },
  106.           },
  107.           {
  108.             path: '/system/area',
  109.             name: 'Area',
  110.             component: () => import('@/views/system/Area/Index'),
  111.             meta: { title: 'menu.system.area', keepAlive: false, permission: ['system'] },
  112.           },
  113.           {
  114.             path: '/system/group',
  115.             name: 'Group',
  116.             component: () => import('@/views/system/Group/Index'),
  117.             meta: { title: 'menu.system.group', keepAlive: false, permission: ['system'] },
  118.           },
  119.         ],
  120.       },
  121.       {
  122.         path: '/example',
  123.         name: 'example',
  124.         meta: {
  125.           keepAlive: true,
  126.           title: 'menu.example.default',
  127.           icon: 'video-camera',
  128.         },
  129.         component: RouteView,
  130.         children: [
  131.           {
  132.             path: '/example/userOrganize',
  133.             name: 'userOrganize',
  134.             component: () => import('@/views/example/userOrganize/Index'),
  135.             meta: { title: 'menu.example.userOrganize', keepAlive: false, permission: ['system'] },
  136.           },
  137.           {
  138.             path: '/example/openHref',
  139.             name: 'openHref',
  140.             component: () => import('@/views/example/openHref/Index'),
  141.             meta: { title: 'menu.example.openHref', keepAlive: false, permission: ['system'] },
  142.           },
  143.         ],
  144.       },
  145.     ],
  146.   },
  147.   {
  148.     path: '*', redirect: '/404', hidden: true,
  149.   },
  150. ]

菜单介绍

菜单根据 router.config.js 生成，具体逻辑在 src/store/modules/permission.js 中的 actions.GenerateRoutes 方法实现。
image.png
image.png

需求实例

上面对这部分的实现概要进行了介绍，接下来通过实际的案例来说明具体该怎么做。

菜单跳转到外部地址

你可以直接将完整 url 填入 path 中，框架会自动处理。

  1. {
  2.     path: 'https://pro.loacg.com/docs/getting-started',
  3.     name: 'docs',
  4.     meta: {
  5.         title: '文档', 
  6.         target: '_blank' // 打开到新窗口
  7.    }
  8. }

加好后，会默认生成相关的路由及导航。

新增布局

在脚手架中我们通过嵌套路由来实现布局模板。router.config.js 是一个数组，其中第一级数据就是我们的布局，如果你需要新增布局可以再直接增加一个新的一级数据。

  1. {
  2.     path: '/new-router',
  3.     name: 'newRouter',
  4.     redirect: '/new-router/ahaha',
  5.     component: RouteView,
  6.     meta: { title: '仪表盘', keepAlive: true, permission: [ 'dashboard' ] },
  7.     children: [
  8.     {
  9.         path: '/new-router/ahaha',
  10.         name: 'ahaha',
  11.         component: () => import('@/views/dashboard/Analysis'),
  12.         meta: { title: '分析页', keepAlive: false, permission: [ 'ahaha' ] }
  13.     }
  14. }

路由配置项

  1. {
  2.   redirect: noredirect,
  3.   name: 'router-name',
  4.   hidden: true,
  5.   meta: {
  6.     title: 'title',
  7.     icon: 'a-icon',
  8.     keepAlive: true,
  9.     hiddenHeaderContent: true,
  10.   }
  11. }

API介绍

{ Route } 对象

参数 说明 类型 默认值
hidden 控制路由和子路由是否显示在 sidebar boolean false
redirect 重定向地址, 访问这个路由时,自定进行重定向 string -
name 路由名称, 必须设置,且不能重名 string -
meta 路由元信息（路由附带扩展信息） object {}
hideChildrenInMenu 强制菜单显示为Item而不是SubItem(配合 meta.hidden) boolean -

{ Meta } 路由元信息对象

参数 说明 类型 默认值
title 路由标题, 用于显示面包屑, 页面标题 *推荐设置 string -
icon 路由在 menu 上显示的图标 [string,svg] -
keepAlive 缓存该路由 (开启 multi-tab 是默认值为 true) boolean false
hiddenHeaderContent *特殊 隐藏 PageHeader
组件中的页面带的 面包屑和页面标题栏		 boolean false
permission 与项目提供的权限拦截匹配的权限，如果不匹配，则会被禁止访问该路由页面 array []

路由自定义 Icon 请引入自定义 svg Icon 文件，然后传递给路由的 meta.icon 参数即可
请注意 component: () => import(‘..’) 方式引入路由的页面组件为 懒加载模式。具体可以看 Vue 官方文档
增加新的路由应该增加在 ‘/‘ (index) 路由的 children 内
无需控制权限的路由或者需要在未登录情况访问的路由，可以定义在 /src/config/router.config.js 下的 constantRouterMap 属性中
permission 可以进行自定义修改，只需要对这个模块进行自定义修改即可 src/store/modules/permission.js