# 表单设计器 - 路由配置 [TOC] ## 功能介绍 通过配置路由,可以实现当数据添加成功后执行相关操作,例如跳转到新的表单、打开路由或外部页面。 ## 操作路径 在表单设计器列表上,找到你要配置路由的一项,在更多里找到并点击路由配置 ![](https://img.kancloud.cn/b0/77/b07794816caa0e1e28e7428ceeccf759_1402x538.png) ![](https://img.kancloud.cn/3a/00/3a00cd292f7c0916b19327c2275c3035_777x454.png) ## 新增页面参数介绍 点击新增按钮 ![](https://img.kancloud.cn/76/bb/76bb28f7dca259bce8844cf9300a4cc3_794x344.png) * `路由名称` 用于描述当前路由的功能 * `跳转类型` 路由跳转的类型,固定以下三个值 * `跳转到表单` 跳转到其他的表单设计器表单,**路由地址填表单编码** * `跳转到菜单` 跳转到当前系统配置的菜单,**路由地址填菜单地址** * `跳转到外部` 跳转到外部网站,**路由地址填网址链接** * `路由地址` 根据不同的路由类型填写不同的地址 ## 注意事项 * 同时只能启用一个路由配置 * 在路由跳转时都会传递表单的值,但是传递的方式不同。 * 跳转到表单时是直接赋值到新表单上 * 跳转到菜单时是传递的dataId,可以通过工具类获取值(见示例-->跳转到菜单) * 跳转到外部时也是传递的dataId,但是由于是外部网站,获取方式需要视情况而定 ## 示例 ### 跳转到表单 #### 路由配置 ![](https://img.kancloud.cn/ef/cb/efcbed35d4f365c8be2bea10ec06b6fc_758x93.png) #### 效果 在请假单输入完并保存成功后,自动跳转到了在线设计demo,并将输入的数据传了过去 ![](https://img.kancloud.cn/d9/79/d979f4e09c0292fda257f2f77ba11cc2_1017x501.gif) ### 跳转到菜单 #### 路由配置 ![](https://img.kancloud.cn/96/d3/96d394bfcdecdaa033bf2f4029322585_759x98.png) #### 效果 在请假单输入完并保存成功后,自动跳转到了Helloworld页面,并将输入的数据传了过去 ![](https://img.kancloud.cn/56/61/5661bf30d437222c0eca00470798fe71_1017x501.gif) #### 目标菜单页面获取数据的方式 引用工具类 ``` import { getDesformDataByRouteDataId } from '@/utils/desform/DesformRouteUtils' ``` 在vue容器内任意区域调用即可获取: ![](https://img.kancloud.cn/82/bb/82bbef1575cb3810022a1f56daec88b3_738x185.png) 效果: ![](https://img.kancloud.cn/dd/a5/dda532d0dc698511f6fd376ff1d8c05b_712x287.png) ### 跳转到外部网站 #### 路由配置 ![](https://img.kancloud.cn/72/19/72194f6bbed86f1b1e06a1889045fa07_750x88.png) #### 效果 在请假单输入完并保存成功后,自动跳转到了Jeecg官网,并将数据ID传了过去 ![](https://img.kancloud.cn/db/c0/dbc09a12e6a5e0d00357921f2a349bfd_1013x663.gif) 传递的数据ID ![](https://img.kancloud.cn/5f/93/5f93fbae5e7a4b2962050917287668c1_433x76.png)