自定义页面

PC端

第一步：新建页面

自定义页面，需要在 /src/views 文件夹下新建你所需开发的页面，并且尽量规范化，比如：你新建页面的路由为: /custom/index，则你新建的页面的路径则为：src -> views -> custom -> index.vue。 如下图，我在 /src/views 下，新建了一个文件夹为custom，并且里面有一个index.vue的文件

第二步：自定义路由

自定义路由，需要在 /src/router/routes 文件夹下的 basic.ts 和 index.ts 下进行自定义，如下图，我在 basic.ts 中新建了一个自定义路由 CUSTOMFORM_ROUTE，并在 index.ts 中引入了这个自定义路由。

第三步：配置路由权限（菜单权限）

配置路由（菜单）权限需要用管理员账号登录，在 菜单管理 页面 新增菜单 进行操作，其中 菜单名称、组件名称、编码、上级菜单、所属系统 根据实际情况填写或者选择，路由地址 则必须与第二步中 自定义路由 一致，否则会找不到页面的。组件路径 则与第一步中的 新建页面 新建的页面的路径一致。

第四步：配置角色权限

要显示 自定义页面 还需在特定的角色分配权限，在 角色管理 页面选择对应的角色，点击 功能授权 -> 菜单 进行配置

选择你新建的页面，点击 确定 按钮进行配置即可，如下图：

第五步： 查看效果

经过上面的操作，点击你新建的路由，即可显示你自定义的页面

APP端

第一步：新建页面

自定义页面，需要在 pages 文件夹下新建你所需开发的页面，比如：我在 pages 下新建了一个文件夹 custom，并且里面新建两个文件 list.vue 和 detail.vue，并在根目录下的 pages.json 下的配置了这两个文件的路由 pages/custom/list 和 pages/custom/detail

第二步：配置路由权限

由于APP端的权限与PC端的分开，所以配置APP端的路由权限，需要在数据库中找到表名为： xjr_app_menu 的表，并在表中插入你新建页面的相关信息。如下图，我插入了一条name为“自定义页面”，url为“/pages/custom/list”（必须以/开头，否则跳转会有问题），create_user_id填写一般为管理员的id，其他字段根据实际情况填写。

第三步：分配权限

经过第三步后，APP端并不会显示新建的页面，要显示则需要在PC端的 角色管理 页面选择对应的角色，点击 移动端功能授权 进行配置。

选择你在数据库插入的数据，点击 确定 按钮进行配置即可，如下图：

第五步： 查看效果

经过上面的操作，点击你新建的路由，即可显示你自定义的页面