# :-: 前端添加页面 ### 侧边栏菜单 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'] } ~~~