### 側邊欄菜單 sider.js 配置
側邊菜單一般較多，所以建議拆分模塊，便于維護。仍然以上一篇的`dashboard`為例，創建文件`src/menu/modules/dashboard.js`：
~~~
// src/menu/modules/dashboard.js
const pre = '/dashboard/';
export default {
path: '/dashboard',
title: 'Dashboard',
header: 'home',
custom: 'i-icon-demo i-icon-demo-dashboard',
children: [
{
path: `${pre}console`,
title: '主控臺'
},
{
path: `${pre}monitor`,
title: '監控頁'
}
]
}
~~~
添加路由`/router/modules`模塊，在`/router/routes.js`文件中`children`添加模塊，例如添加`product`模塊路由
~~~
import BasicLayout from '@/layouts/basic-layout';
const pre = 'product_';
export default {
path: '/admin/product',
name: 'product',
header: 'product',
meta: {
// 授權標識
auth: ['admin-store-index']
},
redirect: {
name: `${pre}productList`
},
component: BasicLayout,
children: [
{
path: 'product_list',
name: `${pre}productList`,
meta: {
title: '商品管理',
auth: ['admin-store-storeProuduct-index'] //鑒權后臺添加的時候會有唯一標示
},
component: () => import('@/pages/product/productList')
},
{
path: 'product_classify',
name: `${pre}productClassify`,
meta: {
title: '商品分類',
auth: ['admin-store-storeCategory-index']
},
component: () => import('@/pages/product/productClassify')
},
{
path: 'add_product/:id?',
name: `${pre}productAdd`,
meta: {
auth: ['admin-store-storeProuduct-index'],
title: '商品添加'
},
component: () => import('@/pages/product/productAdd')
},
{
path: 'product_reply/:id?',
name: `${pre}productEvaluate`,
meta: {
auth: ['admin-store-storeProuduct-index'],
title: '商品評論'
},
component: () => import('@/pages/product/productReply')
},
{
path: 'product_attr',
name: `${pre}productAttr`,
meta: {
auth: ['admin-store-storeProuduct-index'],
title: '屬性規則'
},
component: () => import('@/pages/product/productAttr')
}
]
};
~~~
側邊欄菜單配置項：
* **path**：完整的頁面路徑
* **title**：菜單標題
* **icon**：（選填）菜單圖標，該選項僅支持 iView 內置 icon
* **custom**：（選填）菜單自定義圖標，該選項可以使用自定義的 iconfont 圖標，使用該選項，不可以設置 icon 選項
* **img**：（選填）菜單圖標，該選項設置的是一個具體的圖片文件，使用該選項，不可以設置 icon 與 custom 選項
* `1.2.0`**target**：當值設置為`_blank`時，點擊會在新窗口中打開鏈接
* `1.2.0`**divided**：設置為 true，則菜單折疊時顯示分割線
* **header**：隸屬于哪一個頂部菜單，對應于 header.js 中的 name
* **children**：子菜單，支持多級嵌套
### 添加動態菜單
后臺設置->權限設置->添加菜單
### 隱藏菜單
菜單必須要配置，如果不配置，則刷新后菜單欄不會顯示。如果想要隱藏菜單（頂欄或側邊欄都支持），需要給菜單項配置一個不存在的鑒權信息來實現，比如：
~~~
{
path: '/dashboard/console',
title: '主控臺',
auth: ['hidden'] // 不存在的鑒權，所以不會顯示該菜單
}
~~~
### 帶參菜單`2.2.0`
如果您的路由是帶參的，比如某個商品詳情，這類對應的菜單往往不顯示在側邊欄里，只顯示到它的父級，因為商品頁會有無數個，也預先不知道參數（如 id）。這種情況需要把菜單`path`設置與帶參路由一致，并隱藏，比如：
~~~
{
path: '/product/:id',
title: '商品詳情',
auth: ['hidden']
}
~~~
