# :-: 前端添加页面
### 侧边栏菜单 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']
}
~~~
- 序言
- 快速上手
- 项目架构图
- App功能图
- Admin功能图
- 快速了解
- 快速开始
- 本地开发
- 服务器及系统搭建
- 服务器购买
- 域名购买(已有域名则跳过)
- 域名解析
- 服务器配置
- 宝塔配置
- 创建站点
- 服务部署
- 新手入门
- 运行项目和打包前准备
- Java项目运行和打包
- VUE WEB PC 管理端运行和打包
- Uniapp 移动端运行和打包
- 其他
- 短信设置
- 小票打印配置
- 客服
- 复制第三方平台商品
- 使用说明
- 首页
- 商品分类
- 分类说明
- 分类管理
- 普通产品
- 发布商品
- 商品规格
- 商品评价
- 前台页面
- 产品属性
- 产品详情
- 产品热门搜索
- 秒杀配置维护
- 秒杀商品维护
- 砍价
- 秒杀产品
- 砍价规则
- 砍价活动
- 拼团
- 拼团规则
- 拼团活动
- 分销配置
- 提现
- 佣金提现
- 分销
- 提现规则
- 发起提现
- 后台审核
- 分销员管理
- 分销规则说明
- 优惠券
- 发布优惠券
- 领取及使用
- 会员等级
- 等级说明
- 积分
- 积分设置
- 积分来源
- 积分使用
- 文章管理
- 文章界面
- 发布文章
- 订单管理
- 后台订单处理
- 前端订单处理
- 订单退款
- 订单打印
- 账户管理
- 账号信息
- 账户资金
- 邮费说明
- 邮费组成
- 商城运费设置
- 运费模板
- 商品采集
- 物流查询
- 电子面单
- 一号通
- 短信
- 设置
- 系统配置
- 物流配置
- 文件上传配置
- 库存说明
- 本地存储
- 常见问题
- 七牛云存储
- 公众号
- 腾讯云存储
- 配置
- 阿里云存储
- 菜单
- uniapp打包H5
- 开发配置
- 公众号模板消息
- 微信小程序
- 微信平台配置
- CRMEB后台配置
- 微信小程序提交审核
- 微信小程序版本发布
- 微信小程序订阅消息
- 微信小程序客服
- 支付
- 支付配置
- 公众号支付
- 小程序支付
- WEB PC页面刷新和富文本上传图片404
- npm镜像问题
- 测试环境微信授权弹出提示框
- Swagger 后台 API 文档
- start.sh启动报错
- 后台管理系统登录问题
- 系统默认管理员登陆账号
- 微信消息推送接口地址
- 宝塔redis设置密码
- 商品详情中的上传图片组件404
- Java子项目日志
- 支付成功但订单显示失败
- 移动端基本介绍
- 首页
- 分类页
- 个人中心
- WEB PC 管理端基本介绍
- 后台前端目录结构
- 前端开发配置
- 前端配置说明
- 前端添加页面
- 前端引用组件
- 前端构建和发布
- 技术文档
- 项目
- Crmeb
- 移动端
- PC后台
- 开发规范
- 数据字典
- Crmeb
- 任务
- 组合数据
- 后台表单说明
- 拦截器
- 过滤器
- MyBatis-Plus
- 无限级分类设计
- 分页配置
- 必看内容
- 七牛云
- 本地存储
- 七牛云存储
- 腾讯云存储
- 文件上传
- 阿里云存储
- 附录