[发明专利]一种前端Vue页面可视化配置的方法、装置及存储介质

说明书

本申请涉及路由配置领域，提供一种前端Vue页面可视化配置的方法、装置及存储介质，该方法包括：在路由管理工具中输入路由文件夹地址，遍历路由文件夹地址对应的各路由文件夹，并为遍历到的各路由文件夹分别配置路由配置信息；启动浏览器，在UI界面中将所有路由的配置文件渲染为一个树状结构；每个路由路径对应多个页面节点，页面节点之间存在路由关系。同一个页面节点中的路由页面之间存在路由关系；通过树状结构查询每个路由的页面节点之间的串联状态；接收针对树状结构的预览指令，执行预览指令，根据各页面节点之间的串联状态跳转到下一个页面节点，直至预览结束。通过采用本方案，能够提高开发效率和缩短定位问题的时间。

技术领域

本申请涉及路由配置领域，尤其涉及前端Vue页面可视化配置的方法、装置及存储介质。

背景技术

目前，业内在vue框架项目中，路由的配置通常由一个或多个Vue.js文件配置路由配置信息，从路由配置信息中只能知道每一个路由路径指向的页面名称，无法预览页面具体内容。当页面数量达到数十个的时候，配置文件会变得非常庞大，层级结构也会变得很复杂。当开发人员试图修改和添加其他页面路由、或者定位路由相关问题时，则很难理解整个路由配置信息，增加开发的难度和定位问题的时间。

发明内容

本申请提供了一种前端Vue页面可视化配置的方法、装置及存储介质，能够解决在vue框架项目中难理解整个路由配置信息，开发的难度大和定位问题的时间长的问题。

第一方面，本申请提供一种前端Vue页面可视化配置的方法，所述方法包括：

接收用户输入的指令，响应于所述指令：显示命令行的显示窗口，在所述显示窗口运行路由管理工具；

在所述路由管理工具中输入路由文件夹地址，通过所述路由管理工具遍历所述路由文件夹地址对应的各路由文件夹，并为遍历到的各路由文件夹分别配置路由配置信息；其中，所述路由文件夹地址是指访问路由文件夹的路径，所述路由文件夹包括路由配置信息、存放Vue组件的文件夹、存放路由配置信息的文件夹、Vue项目的入口文件和根组件；所述路由配置信息包括路由路径；

启动浏览器，加载人机交互UI界面，在所述UI界面中将所有路由的配置文件渲染为一个树状结构；其中，每个路由路径对应多个页面节点，页面节点之间存在路由关系，每个页面节点包括多个路由页面，同一个页面节点中的路由页面之间存在路由关系；

通过所述树状结构查询每个路由的页面节点之间的串联状态，所述串联状态是指页面节点之间存在的跳转关系；

接收针对所述树状结构的预览指令，执行所述预览指令，根据各页面节点之间的串联状态有序和自动的跳转到下一个页面节点，直至预览结束。

一种可能的设计中，对于一个审批页面节点而言，所述审批页面节点包括审批管理页面、待办页面和审批事件回调页面，所述审批管理页面用于编辑表单页面、审批和查看触发审批事件；所述代办页面用于获取待审批数量和待审批实例；所述审批事件回调页面用于当审批事件发生时，调用注册的http接口返回对应的审批事件信息。

一种可能的设计中，每个页面节点的有效操作范围内均设置控制图标，所述控制图标包括放大图标和缩小图标，每个页面节点的有效操作范围内设置的控制图标仅对所述页面节点生效。

一种可能的设计中，所述通过所述树状结构查询每个路由的页面节点之间的串联状态，包括：

获取查询指令，所述查询指令包括路由页面的标识信息；

根据所述查询指令在所述树状结构中定位于所述标识信息对应的目标路由页面；

在所述树状结构中查询与所述目标路由页面存在串联关系的路由页面或页面节点。