概述

在管理后台新增页面需要完成两个步骤：

1. 在前端注册路由组件与权限标识；
2. 在管理后台【设置 -> 权限管理 -> 菜单管理】中添加对应的菜单节点。

---

步骤一：创建 Vue 页面组件

在 src/pages/ 目录下创建对应的页面组件，例如 src/pages/lease/orderList/index.vue。

---

步骤二：配置前端路由模块

在 src/router/modules/ 目录下创建或编辑路由配置文件（例如 lease.js）：

import BasicLayout from '@/layouts/basic-layout';

export default {
    path: '/admin/lease',
    name: 'lease',
    header: 'lease',
    component: BasicLayout,
    children: [
        {
            path: 'order_list',
            name: 'lease_order_list',
            meta: {
                title: '租赁订单列表',
                auth: ['admin-lease-order-index'] // 与后台菜单权限标识对应
            },
            component: () => import('@/pages/lease/orderList')
        },
        {
            path: 'order_detail/:id',
            name: 'lease_order_detail',
            meta: {
                title: '订单详情',
                auth: ['admin-lease-order-detail'],
                activeMenu: '/admin/lease/order_list' // 侧边栏高亮父级菜单
            },
            component: () => import('@/pages/lease/orderDetail')
        }
    ]
};

并在 src/router/routes.js 中将该模块引入并注册到路由表。

---

步骤三：后台添加菜单与权限

1. 登录管理后台，进入【设置 -> 权限管理 -> 菜单管理】；
2. 点击【添加菜单】，选择上级菜单；
3. 填入菜单名称、路由地址（如 /admin/lease/order_list）及权限标识（如 admin-lease-order-index）；
4. 保存后刷新页面或为对应管理员角色分配该菜单权限即可。