import { url } from '@kit.ArkTS';

@Entry
@Component
struct ParseUrl {
  build() {
    Column() {
      Button('解析url信息').onClick(() => {
        let that = url.URL.parseURL('https://username:password@host:8080/directory/file?foo=1&bar=2#fragment');
        console.info(`hash:${that.hash}`); // #fragment
        console.info(`host:${that.host}`); // host:8080
        console.info(`hostname:${that.hostname}`); // host
        console.info(`href:${that.href}`); // https://username:password@host:8080/directory/file?foo=1&bar=2#fragment
        console.info(`origin:${that.origin}`); // https://host:8080
        console.info(`password:${that.password}`); // password
        console.info(`pathname:${that.pathname}`); // /directory/file
        console.info(`port:${that.port}`); // 8080
        console.info(`protocol:${that.protocol}`); // https:
        console.info(`search:${that.search}`); // ?foo=1&bar=2
        console.info(`username:${that.username}`); // username
        // that.params返回值为URLParams对象
        console.info(`params: foo${that.params.get('foo')}`); // 1
      });

      Button('解析url中#后的数据').onClick(() => {
        let result =
          this.isUrlHasSomeKey('https://username:password@host:8080/#/directory/file?foo=1&bar=666',
            'bar');
        console.info(`是否成功解析url中#后的数据：${result}`);
      });
    };
  }

  //判断URL中是否包含某个key
  isUrlHasSomeKey(urlStr: string, key: string) {
    if (urlStr.length === 0) {
      return false;
    }
    console.info(`待解析的url：${urlStr}`);
    let urlTemp = url.URL.parseURL(urlStr);
    let paramsString = urlTemp.search.slice(1);
    let paramsObject = new url.URLParams(paramsString);
    // 先按照正常方式判断，如果成功就返回，失败再获取hash值，再继续判断
    if (paramsObject.has(key)) {
      return true;
    } else {
      // 如果正常方式判断不含有对应的key，有可能是URL中有#的hash值，所以通过获取hash值，最终确定是否有对应的key
      let paramsObject1 = new url.URLParams(urlTemp.hash);
      if (paramsObject1.has(key)) {
        console.info(`解析url中#后的数据为：${paramsObject1.get(key)}`);
        return true;
      } else {
        return false;
      }
    }
  }
}

常见FAQ

Q：URL的参数放置在哈希路由符号"#"之后，通过URL解析接口获取不到参数？

A：URL标准规范中，哈希路由符号"#"后的内容属于页面片段标识，URL解析接口默认不处理该部分参数，可通过字符串处理后获取URL参数，参考如下代码。

//判断URL中是否包含某个key
isUrlHasSomeKey(urlStr: string, key: string) {
  if (urlStr.length === 0) {
    return false;
  }
  console.info(`待解析的url：${urlStr}`);
  let urlTemp = url.URL.parseURL(urlStr);
  let paramsString = urlTemp.search.slice(1);
  let paramsObject = new url.URLParams(paramsString);
  // 先按照正常方式判断，如果成功就返回，失败再获取hash值，再继续判断
  if (paramsObject.has(key)) {
    return true;
  } else {
    // 如果正常方式判断不含有对应的key，有可能是URL中有#的hash值，所以通过获取hash值，最终确定是否有对应的key
    let paramsObject1 = new url.URLParams(urlTemp.hash);
    if (paramsObject1.has(key)) {
      console.info(`解析url中#后的数据为：${paramsObject1.get(key)}`);
      return true;
    } else {
      return false;
    }
  }
}

编译时class-transformer中-Type报错该如何解决

异步接口如何以同步的方式进行调用

意见反馈

以上内容对您是否有帮助？

意见反馈

如果您有其他疑问，您也可以通过开发者社区问答频道来和我们联系探讨。

社区提问智能客服提问