路由和菜單是組織起一個(gè)應(yīng)用的關(guān)鍵骨架慨畸，為了方便管理滨达，使用了中心化的方式，在 router.config.js統(tǒng)一配置和管理赡盘。

基本結(jié)構(gòu)

在這一部分，腳手架通過結(jié)合一些配置文件缰揪、基本算法及工具函數(shù)陨享，搭建好了路由和菜單的基本框架，主要涉及以下幾個(gè)模塊/功能：

• 路由管理 通過約定的語法根據(jù)在 router.config.js 中配置路由钝腺。
• 菜單生成 根據(jù)路由配置來生成菜單抛姑。菜單項(xiàng)名稱，嵌套路徑與路由高度耦合艳狐。
• 面包屑 組件 PageHeader 中內(nèi)置的面包屑也可由腳手架提供的配置信息自動(dòng)生成定硝。

下面簡(jiǎn)單介紹下各個(gè)模塊的基本思路

路由

目前腳手架中所有的路由都通過 router.config.js來統(tǒng)一管理，在 vue-router 的配置中我們?cè)黾恿艘恍﹨?shù)毫目，如 hideChildrenInMenu,meta.title,meta.icon,meta.permission蔬啡，來輔助生成菜單诲侮。其中：

• hideChildrenInMenu 用于隱藏不需要在菜單中展示的子路由。用法可以查看 分步表單 的配置箱蟆。
• hidden 可以在菜單中不展示這個(gè)路由沟绪，包括子路由。效果可以查看 other 下的路由配置空猜。
• meta.title 和 meta.icon分別代表生成菜單項(xiàng)的文本和圖標(biāo)绽慈。
• meta.permission 用來配置這個(gè)路由的權(quán)限，如果配置了將會(huì)驗(yàn)證當(dāng)前用戶的權(quán)限辈毯，并決定是否展示 *（默認(rèn)情況下）坝疼。
• meta.hidden 可以強(qiáng)制子菜單不顯示在菜單上(和父級(jí) hideChildrenInMenu 配合)
• meta.hiddenHeaderContent 可以強(qiáng)制當(dāng)前頁面不顯示 PageHeader 組件中的頁面帶的 面包屑和頁面標(biāo)題欄

菜單

菜單根據(jù) router.config.js生成，具體邏輯在 src/store/modules/permission.js 中的 actions.GenerateRoutes 方法實(shí)現(xiàn)漓摩。

需求實(shí)例

上面對(duì)這部分的實(shí)現(xiàn)概要進(jìn)行了介紹裙士，接下來通過實(shí)際的案例來說明具體該怎么做。

菜單跳轉(zhuǎn)到外部地址

你可以直接將完整 url 填入 path 中管毙，框架會(huì)自動(dòng)處理腿椎。

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

加好后，會(huì)默認(rèn)生成相關(guān)的路由及導(dǎo)航夭咬。

新增布局

在腳手架中我們通過嵌套路由來實(shí)現(xiàn)布局模板啃炸。router.config.js 是一個(gè)數(shù)組，其中第一級(jí)數(shù)據(jù)就是我們的布局卓舵，如果你需要新增布局可以再直接增加一個(gè)新的一級(jí)數(shù)據(jù)南用。

{
    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' ] }
    }
}

路由配置項(xiàng) E.g:

/**
 * 路由配置說明：
 * 建議：sider menu 請(qǐng)不要超過三級(jí)菜單，若超過三級(jí)菜單掏湾，則應(yīng)該設(shè)計(jì)為頂部主菜單 配合左側(cè)次級(jí)菜單
 *
 **/
 {
  redirect: noredirect,
  name: 'router-name',
  hidden: true,
  meta: {
    title: 'title',
    icon: 'a-icon',
    keepAlive: true,
    hiddenHeaderContent: true,
  }
}

API

{ Route } 對(duì)象

{ Meta } 路由元信息對(duì)象

路由自定義 Icon 請(qǐng)引入自定義 svg Icon 文件筑公，然后傳遞給路由的 meta.icon 參數(shù)即可

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