# :-: 前端添加頁面

### 側邊欄菜單 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']

}

~~~

總結

以上是生活随笔為你收集整理的crmeb单商户java版安装_前端配置说明 · CRMEB 单商户Java版 帮助文档 · 看云的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。