# :-: 前端添加頁(yè)面

### 側(cè)邊欄菜單 sider.js 配置

側(cè)邊菜單一般較多，所以建議拆分模塊，便于維護(hù)。仍然以上一篇的`dashboard`為例，創(chuàng)建文件`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: '主控臺(tái)'

},

{

path: `${pre}monitor`,

title: '監(jiān)控頁(yè)'

}

]

}

~~~

添加路由`/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: {

// 授權(quán)標(biāo)識(shí)

auth: ['admin-store-index']

},

redirect: {

name: `${pre}productList`

},

component: BasicLayout,

children: [

{

path: 'product_list',

name: `${pre}productList`,

meta: {

title: '商品管理',

auth: ['admin-store-storeProuduct-index'] //鑒權(quán)后臺(tái)添加的時(shí)候會(huì)有唯一標(biāo)示

},

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: '商品評(píng)論'

},

component: () => import('@/pages/product/productReply')

},

{

path: 'product_attr',

name: `${pre}productAttr`,

meta: {

auth: ['admin-store-storeProuduct-index'],

title: '屬性規(guī)則'

},

component: () => import('@/pages/product/productAttr')

}

]

};

~~~

側(cè)邊欄菜單配置項(xiàng)：

* **path**：完整的頁(yè)面路徑

* **title**：菜單標(biāo)題

* **icon**：(選填)菜單圖標(biāo)，該選項(xiàng)僅支持 iView 內(nèi)置 icon

* **custom**：(選填)菜單自定義圖標(biāo)，該選項(xiàng)可以使用自定義的 iconfont 圖標(biāo)，使用該選項(xiàng)，不可以設(shè)置 icon 選項(xiàng)

* **img**：(選填)菜單圖標(biāo)，該選項(xiàng)設(shè)置的是一個(gè)具體的圖片文件，使用該選項(xiàng)，不可以設(shè)置 icon 與 custom 選項(xiàng)

* `1.2.0`**target**：當(dāng)值設(shè)置為`_blank`時(shí)，點(diǎn)擊會(huì)在新窗口中打開鏈接

* `1.2.0`**divided**：設(shè)置為 true，則菜單折疊時(shí)顯示分割線

* **header**：隸屬于哪一個(gè)頂部菜單，對(duì)應(yīng)于 header.js 中的 name

* **children**：子菜單，支持多級(jí)嵌套

### 添加動(dòng)態(tài)菜單

后臺(tái)設(shè)置->權(quán)限設(shè)置->添加菜單

### 隱藏菜單

菜單必須要配置，如果不配置，則刷新后菜單欄不會(huì)顯示。如果想要隱藏菜單(頂欄或側(cè)邊欄都支持)，需要給菜單項(xiàng)配置一個(gè)不存在的鑒權(quán)信息來(lái)實(shí)現(xiàn)，比如：

~~~

{

path: '/dashboard/console',

title: '主控臺(tái)',

auth: ['hidden'] // 不存在的鑒權(quán)，所以不會(huì)顯示該菜單

}

~~~

### 帶參菜單`2.2.0`

如果您的路由是帶參的，比如某個(gè)商品詳情，這類對(duì)應(yīng)的菜單往往不顯示在側(cè)邊欄里，只顯示到它的父級(jí)，因?yàn)樯唐讽?yè)會(huì)有無(wú)數(shù)個(gè)，也預(yù)先不知道參數(shù)(如 id)。這種情況需要把菜單`path`設(shè)置與帶參路由一致，并隱藏，比如：

~~~

{

path: '/product/:id',

title: '商品詳情',

auth: ['hidden']

}

~~~

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。