路由和菜单

路由和菜单是组织起一个应用的关键骨架，为了方便管理，使用了中心化的方式，在 router.config.js 统一配置和管理。

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

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

下面简单介绍下各个模块的基本思路

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

hideChildrenInMenu 用于隐藏不需要在菜单中展示的子路由。用法可以查看 分步表单 的配置。 hidden 可以在菜单中不展示这个路由，包括子路由。效果可以查看 other 下的路由配置。 meta.title 和 meta.icon 分别代表生成菜单项的文本和图标。 meta.permission 用来配置这个路由的权限，如果配置了将会验证当前用户的权限，并决定是否展示 *（默认情况下）。 meta.hidden 可以强制子菜单不显示在菜单上(和父级 hideChildrenInMenu 配合) meta.hiddenHeaderContent 可以强制当前页面不显示 PageHeader 组件中的页面带的 面包屑和页面标题栏

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

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

菜单跳转到外部地址

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

path: 'https://www.baidu.com', name: 'docs', meta: { title: '文档', target: '_blank' // 打开到新窗口

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

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

path: '/new-router', name: 'newRouter', redirect: '/new-router/ahaha', component: RouteView, meta: { title: '仪表盘', keepAlive: true, permission: [ 'dashboard' ] }, children: [ path: '/new-router/ahaha', name: 'ahaha', component: () => import('@/views/dashboard/Analysis'), meta: { title: '分析页', keepAlive: false, permission: [ 'ahaha' ] }

路由配置项 E.g:

* 路由配置说明： * 建议：sider menu 请不要超过三级菜单，若超过三级菜单，则应该设计为顶部主菜单 配合左侧次级菜单 redirect: noredirect, name: 'router-name', hidden: true, meta: { title: 'title', icon: 'a-icon', keepAlive: true, hiddenHeaderContent: true,

{ Route } 对象