Files

apple e8563e4fda 从 shccd159 合并 backend-adminend 子项目到 main

Made-with: Cursor

2026-03-16 11:32:11 +08:00

7.3 KiB

Raw Permalink Blame History

商品寄卖服务模块 - 路由配置说明

✅ 配置完成

已成功为商品寄卖服务模块创建并注册路由配置。

📁 文件清单

1. 路由模块文件

文件路径: /src/router/modules/consignment.js

路由配置:

{
  path: '/consignment',
  component: Layout,
  redirect: '/consignment/merchandise',
  name: 'Consignment',
  meta: {
    title: '商品寄卖服务',
    icon: 'clipboard',
  },
  children: [...]
}

2. 主路由文件更新

文件路径: /src/router/index.js

更新内容:

✅ 导入 consignmentRouter 模块
✅ 在 constantRoutes 中注册路由（位于财务路由之后）

🎯 路由列表

一级菜单

/consignment - 商品寄卖服务

二级菜单及页面

1. 寄售商品管理

路由路径	组件路径	名称	标题	显示
`/consignment/merchandise`	`@/views/consignment/merchandise/index`	Merchandise	寄售商品管理	显示
`/consignment/merchandise/detail`	`@/views/consignment/merchandise/detail`	MerchandiseDetail	寄售商品详情	隐藏

特性:

列表页显示在菜单中
详情页隐藏，通过列表页跳转
详情页激活菜单：/consignment/merchandise
详情页不缓存（noCache: true）

2. 提现管理

路由路径	组件路径	名称	标题	显示
`/consignment/withdraw`	`@/views/consignment/withdraw/index`	Withdraw	提现管理	显示
`/consignment/withdraw/detail`	`@/views/consignment/withdraw/detail`	WithdrawDetail	提现详情	隐藏

特性:

列表页显示在菜单中
详情页隐藏，通过列表页跳转
详情页激活菜单：/consignment/withdraw
详情页不缓存（noCache: true）

3. 财务日志管理

路由路径	组件路径	名称	标题	显示
`/consignment/financial-log`	`@/views/consignment/financial-log/index`	FinancialLog	财务日志管理	显示

特性:

单页面，无详情页
包含4种日志类型（优惠券、个人奖金、推广奖金、余额）

📊 路由结构图

商品寄卖服务 (/consignment)
├── 寄售商品管理 (/merchandise)
│   └── 寄售商品详情 (/merchandise/detail) [hidden]
├── 提现管理 (/withdraw)
│   └── 提现详情 (/withdraw/detail) [hidden]
└── 财务日志管理 (/financial-log)

🔧 路由配置说明

基础配置

{
  path: '/consignment',           // 路由路径
  component: Layout,              // 使用Layout布局
  redirect: '/consignment/merchandise', // 默认重定向到寄售商品管理
  name: 'Consignment',           // 路由名称（必须唯一）
  meta: {
    title: '商品寄卖服务',        // 菜单显示标题
    icon: 'clipboard',           // 菜单图标
  }
}

子路由配置

显示在菜单中的页面

{
  path: 'merchandise',
  component: () => import('@/views/consignment/merchandise/index'),
  name: 'Merchandise',
  meta: { title: '寄售商品管理', icon: '' }
}

隐藏的详情页

{
  path: 'merchandise/detail',
  component: () => import('@/views/consignment/merchandise/detail'),
  name: 'MerchandiseDetail',
  meta: { 
    title: '寄售商品详情',
    noCache: true,                    // 不缓存页面
    activeMenu: '/consignment/merchandise' // 高亮父菜单
  },
  hidden: true                        // 隐藏在侧边栏
}

🔗 路由跳转示例

从列表页跳转到详情页

寄售商品详情

// 在 merchandise/index.vue 中
handleDetail(row) {
  this.$router.push({
    path: '/consignment/merchandise/detail',
    query: { id: row.id }
  });
}

提现详情

// 在 withdraw/index.vue 中
handleDetail(row) {
  this.$router.push({
    path: '/consignment/withdraw/detail',
    query: { id: row.id }
  });
}

从详情页返回列表页

// 在详情页中
goBack() {
  this.$router.go(-1);  // 返回上一页
  // 或
  this.$router.push('/consignment/merchandise'); // 跳转到指定页面
}

🎨 菜单图标配置

当前图标

所有菜单使用 clipboard 图标（默认配置）

自定义图标

可以在 meta.icon 中指定不同的图标：

meta: {
  title: '寄售商品管理',
  icon: 'shopping', // 可自定义图标名称
}

可用图标: 参考项目中的SVG图标库或Element UI图标

🔐 权限控制

路由级权限（待配置）

如需添加路由级权限控制，在meta中添加roles配置：

meta: {
  title: '寄售商品管理',
  icon: '',
  roles: ['admin', 'editor'] // 指定可访问的角色
}

按钮级权限（已实现）

页面中的按钮已使用 v-hasPermi 指令进行权限控制：

<el-button 
  v-hasPermi="['admin:merchandise:update']"
  @click="handleEdit"
>
  编辑
</el-button>

✅ 验证清单

完成以下步骤后，路由配置即可正常使用：

创建路由模块文件 src/router/modules/consignment.js
在 src/router/index.js 中导入模块
在 constantRoutes 中注册路由
重启开发服务器
验证菜单显示正常
验证页面跳转正常
验证详情页返回正常

🐛 常见问题

1. 菜单不显示

原因: 路由配置问题或权限问题解决:

检查路由是否正确导入和注册
检查meta.title是否配置
检查是否有权限限制

2. 页面跳转404

原因: 路由路径配置错误解决:

检查path配置是否正确
检查组件import路径是否正确
检查组件文件是否存在

3. 详情页刷新后菜单高亮不对

原因: 缺少activeMenu配置解决:

在详情页meta中添加activeMenu配置
指向对应的列表页路径

4. 页面缓存问题

原因: keep-alive缓存了页面解决:

在需要每次都刷新的页面meta中添加 noCache: true
或在页面切换时清除缓存

📝 后续配置

1. 菜单图标优化

根据业务需求，为各个子菜单配置更合适的图标。

2. 权限配置

如需要路由级权限控制，在后台权限管理中添加对应的权限配置。

3. 面包屑配置

如需自定义面包屑显示，可在meta中添加breadcrumb配置。

🚀 启动验证

1. 重启开发服务器

npm run dev

2. 访问路由

主菜单: http://localhost:9527/consignment
寄售商品: http://localhost:9527/consignment/merchandise
提现管理: http://localhost:9527/consignment/withdraw
财务日志: http://localhost:9527/consignment/financial-log

3. 验证功能

✅ 菜单显示正确
✅ 页面能正常访问
✅ 详情页跳转正常
✅ 返回功能正常
✅ 菜单高亮正确

📞 技术支持

如有问题，请参考：

商品寄卖服务模块-开发说明.md
商品寄卖服务模块-文件清单.md
Vue Router 官方文档: https://router.vuejs.org/zh/

创建日期: 2025-11-13
版本: V1.0
状态: ✅ 配置完成
维护团队: 开发团队

7.3 KiB Raw Permalink Blame History Unescape Escape