# :-: 前端添加頁面 ### 側邊欄菜單 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'] } ~~~