# :-: 前端添加页面

### 侧边栏菜单 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']

}

~~~