---
group:
  title: 工具类 
title: 6.url地址转换
---

## 跳转外链、iframe 地址支持带参


描述：组件添加跳转外链事件或者配置 iframe 组件地址时，可以在地址里带参，满足跳转地址需要携带参数的需求

实现原理：在相关事件触发前，工具会解析事件触发地址，如果带参（即存在 localStorage 中的 key 值），则会去 localStorage 里获取此参数（key）的存储的值并将地址里原来的参数值替换成实际存储的值.地址支持带多个参数，都会进行解析处理。

事件触发：

- 跳转外链事件，是在点击触发跳转的时候，会先对地址进行参数解析替换
- iframe 组件，是在打开项目预览的时候，会先对地址进行参数解析替换

参数格式：^{变量名} 变量名支持数字、字母、下划线

使用说明：

- 将使用到的参数存储到 localStorage 中

```js
localStorage.setItem("token", "123");
localStorage.setItem("userId", "abc");
```

- 属性面板输入带参的 URL 地址

例如

```
单个带参地址
https://www.example.com/?token=^{token}

多个带参的地址
https://www.example.com/?token=^{token}&userId=^{userId}
```

- 实际运行地址结果，如果填写的参数在 localStorage 中不存在，会返回空字符串

```
https://www.example.com/?token=123
https://www.example.com/?token=123&userId=abc
```
### getJumpUrlBySearch 用法

```js

/**
 *  跳转外链、iframe 地址支持带参
 *  获取url的search，并有条件：`^{变量名}`的条件取本地存储的数据 // 参数格式：^{变量名} 变量名支持数字、字母、下划线
 *  根据url上的参数变量，重新调整跳转链接
 *  @param {string} href 地址
 *
 *  @return  {string} 完整的url地址
 * */

import { getJumpUrlBySearch } from 'fan-standard-comp';
```

| 方法名      | 类型 |   说明 |
|----------|------|---------|
| getJumpUrlBySearch | Function(value)|  |
| isHttpUrl | Function(url)| 是否是完整的URL地址 |