2 lines
8.3 KiB
JavaScript
2 lines
8.3 KiB
JavaScript
|
import{_ as s,c as n,a as r,o as e}from"./app-CDlLWk6N.js";const a=""+new URL("custom_page_pc_1-CXjVoBOn.png",import.meta.url).href,o=""+new URL("custom_page_pc_2-8e_g1uGT.png",import.meta.url).href,p=""+new URL("custom_page_pc_3-PVAgZmk6.png",import.meta.url).href,g=""+new URL("custom_page_pc_4-BJ6TU5rW.png",import.meta.url).href,i=""+new URL("custom_page_pc_5-67hJreQO.png",import.meta.url).href,c=""+new URL("custom_page_pc_6-D0qmIZZb.png",import.meta.url).href,l=""+new URL("custom_page_app_1-7IYO8Eyo.png",import.meta.url).href,h=""+new URL("custom_page_app_2-BSYSeOjb.png",import.meta.url).href,m=""+new URL("custom_page_app_3-B3tOwhE2.png",import.meta.url).href,_=""+new URL("custom_page_app_4-2qED3-kx.png",import.meta.url).href,d=""+new URL("custom_page_app_5-DVBTSAZJ.png",import.meta.url).href,u={};function f(v,t){return e(),n("div",null,t[0]||(t[0]=[r('<h1 id="自定义页面" tabindex="-1"><a class="header-anchor" href="#自定义页面"><span>自定义页面</span></a></h1><h2 id="pc端" tabindex="-1"><a class="header-anchor" href="#pc端"><span>PC端</span></a></h2><h3 id="第一步-新建页面" tabindex="-1"><a class="header-anchor" href="#第一步-新建页面"><span>第一步：新建页面</span></a></h3><p>自定义页面，需要在 <strong>/src/views</strong> 文件夹下新建你所需开发的页面，并且尽量规范化，比如：你新建页面的路由为: <strong>/custom/index</strong>，则你新建的页面的路径则为：src -> views -> custom -> index.vue。 如下图，我在 <strong>/src/views</strong> 下，新建了一个文件夹为custom，并且里面有一个index.vue的文件</p><p><img src="'+a+'" alt="自定义页面"></p><h3 id="第二步-自定义路由" tabindex="-1"><a class="header-anchor" href="#第二步-自定义路由"><span>第二步：自定义路由</span></a></h3><p>自定义路由，需要在 <strong>/src/router/routes</strong> 文件夹下的 <strong>basic.ts</strong> 和 <strong>index.ts</strong> 下进行自定义，如下图，我在 <strong>basic.ts</strong> 中新建了一个自定义路由 <strong>CUSTOMFORM_ROUTE</strong>，并在 <strong>index.ts</strong> 中引入了这个自定义路由。</p><p><img src="'+o+'" alt="自定义路由"></p><h3 id="第三步-配置路由权限-菜单权限" tabindex="-1"><a class="header-anchor" href="#第三步-配置路由权限-菜单权限"><span>第三步：配置路由权限（菜单权限）</span></a></h3><p>配置路由（菜单）权限需要用管理员账号登录，在 <strong>菜单管理</strong> 页面 <strong>新增菜单</strong> 进行操作，其中 <strong>菜单名称</strong>、<strong>组件名称</strong>、<strong>编码</strong>、<strong>上级菜单</strong>、<strong>所属系统</strong> 根据实际情况填写或者选择，<strong>路由地址</strong> 则必须与第二步中 <strong>自定义路由</strong> 一致，否则会找不到页面的。<strong>组件路径</strong> 则与第一步中的 <strong>新建页面</strong> 新建的页面的路径一致。</p><p><img src="'+p+'" alt="配置路由权限（菜单权限）"></p><h3 id="第四步-配置角色权限" tabindex="-1"><a class="header-anchor" href="#第四步-配置角色权限"><span>第四步：配置角色权限</span></a></h3><p>要显示 <strong>自定义页面</strong> 还需在特定的角色分配权限，在 <strong>角色管理</strong> 页面选择对应的角色，点击 <strong>功能授权</strong> -> <strong>菜单</strong> 进行配置</p><p><img src="'+g+'" alt="配置角色权限"></p><p>选择你新建的页面，点击 <strong>确定</strong> 按钮进行配置即可，如下图：</p><p><img src="'+i+'" alt="配置角色权限"></p><h3 id="第五步-查看效果" tabindex="-1"><a class="header-anchor" href="#第五步-查看效果"><span>第五步： 查看效果</span></a></h3><p>经过上面的操作，点击你新建的路由，即可显示你自定义的页面</p><p><img src="'+c+'" alt="查看效果"></p><h2 id="app端" tabindex="-1"><a class="header-anchor" href="#app端"><span>APP端</span
|