-
Notifications
You must be signed in to change notification settings - Fork 415
前端配置说明
��������� edited this page Jun 4, 2020
·
1 revision
侧边菜单一般较多,所以建议拆分模块,便于维护。仍然以上一篇的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'] // 不存在的鉴权,所以不会显示该菜单
}
如果您的路由是带参的,比如某个商品详情,这类对应的菜单往往不显示在侧边栏里,只显示到它的父级,因为商品页会有无数个,也预先不知道参数(如 id)。这种情况需要把菜单path
设置与带参路由一致,并隐藏,比如:
{
path: '/product/:id',
title: '商品详情',
auth: ['hidden']
}