# 在页面JS中使用路由
UI引擎已集成vue-router，支持通过编程式路由导航的方式，在页面JS方法中灵活实现路由跳转与参数获取，满足页面间跳转及数据传递的业务需求。
#### 前提条件
已进入目标项目的页面设计器，具体操作请参见[进入前端项目页面设计器](https://support.huaweicloud.com/usermanual-idme/idme_ui_0014.html)。
#### 实现路由跳转
在"页面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" } ``` |
   
![](https://support.huaweicloud.com/usermanual-idme/public_sys-resources/caution_3.0-zh-cn.png)
"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'
```