在页面JS中使用路由

UI引擎已集成vue-router，支持通过编程式路由导航的方式，在页面JS方法中灵活实现路由跳转与参数获取，满足页面间跳转及数据传递的业务需求。

前提条件

已进入目标项目的页面设计器，具体操作请参见进入前端项目页面设计器。

实现路由跳转

在“页面JS”面板定义方法时，可通过“this.router.push()”实现路由跳转，并支持携带路由参数。此方法提供两种使用模式：

模式一：传入访问路径参数
 直接指定目标页面的访问路径（路径可在“页面设置”中的“访问路径”下查看）。语法示例如下：
```
function goSomePage() {
  this.router.push('/path')
}
```
模式二：传入对象参数
 通过对象形式传递路由信息，支持指定页面名称或路径，以及查询参数。语法示例如下：
```
function goSomePage() {
  this.router.push({
    path: '/path',
    query: {
      param1: value1,
      param2: value2,
      ...
    }
  })
}
```

对象参数的具体字段说明如下：

表1 对象参数说明
字段名	类型	描述	示例
name	字符串（String）	页面路由的唯一标识名。对应UI引擎中页面的ID（可从浏览器地址栏的“pageid”参数获取）。	{ name: "1" }
path	字符串（String）	页面的访问路径。需与“页面设置”中的“访问路由”一致，且使用时需在路径前添加“/”。	{ path: "/mypage" }
query	对象（Object）	页面的查询参数。为JavaScript对象，其属性值仅支持字符串、数字、布尔值等基本类型。是一个简单的JavaScript对象。对象每个属性对应的值应该是一个基本类型（string，number，boolean）的值。	{ id: 1, name: "sample" }

“name”和“path”字段只需选择其中一个使用，同时存在可能导致异常。

获取路由参数

在常规前端项目中，路由参数主要分为查询参数（query）和路径参数（params）。UI引擎目前仅支持查询参数的获取。

获取查询参数的语法格式如下：

this.route.query.paramName

其中，“paramName”为路由跳转时在“query”对象中定义的具体参数名。例如：

// 路由跳转时传递参数
this.router.push({
  path: '/targetPage',
  query: {
    userId: 123,
    action: 'view'
  }
});

// 获取参数
const userId = this.route.query.userId; // 获取值为 123
const action = this.route.query.action; // 获取值为 'view'

父主题： 添加事件实现UI引擎前端页面组件间交互

上一篇：通过页面JS实现UI引擎前端页面组件交互

下一篇：管理UI引擎前端页面事件与方法