路由和菜單是組織起一個應用的關鍵骨架，為了方便管理，使用了中心化的方式，在 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,
  }
}

API

{ Route } 對象

{ Meta } 路由元信息對象

路由自定義 Icon 請引入自定義 svg Icon 文件，然后傳遞給路由的 meta.icon 參數即可

請注意 component: () => import('..') 方式引入路由的頁面組件為 懶加載模式。具體可以看 Vue 官方文檔
增加新的路由應該增加在 ‘/‘ (index) 路由的 children 內
無需控制權限的路由或者需要在未登錄情況訪問的路由，可以定義在 /src/config/router.config.js 下的 constantRouterMap 屬性中
permission 可以進行自定義修改，只需要對這個模塊進行自定義修改即可 src/store/modules/permission.js