如何解决HarmonyOS鸿蒙Next中Web组件加载本地HTML执行Hash路由跳转JS脚本失败问题

【问题现象】

使用Web组件加载本地HTML，通过Web组件绑定controller的loadUrl方法执行hash路由跳转，通过日志可以看出脚本执行成功，但实际页面未跳转成功，只是显示路由信息。

路由跳转脚本：

this.controller.loadUrl("javascript:window.location.hash = '# mobile-agreement'");

当前现象：

【背景知识】

Hash路由跳转是前端路由实现的一种方式，利用URL中的哈希（#）部分进行页面导航。当哈希部分变化时，浏览器不会重新加载页面，而是通过JavaScript监听哈希变化来实现页面的跳转和内容的更新。

比如，下面这两串网址访问某服务器的时候，服务器都只会接收到 https://www.xxx.com/ 这一串地址请求，Hash值并不会通过网络请求发送给服务器：

• https://www.xxx.com
• https://www.xxx.com#12345

上述两个地址网络请求Url是一样的，“#”号后的地址不会发送。

【定位思路】

1. 确定JS脚本成功执行：确认进入方法，实际未执行脚本。

示例代码如下：

@StategameReset: string = "console.log('----resource load----'); window.location.hash = '# mobile-agreement';";
Button('修改路由', { type: ButtonType.Capsule })
  .onClick(() => {
    try {
      Logger.info(TAG, ': resource load: window.location.hash = \'# mobile-agreement\'');
      this.controller.loadUrl("javascript:" + this.gameReset);
    } catch (error) {
      Logger.info(TAG, `loadUrl gameReset fail: ${JSON.stringify(error)}`);
    }
  })

日志仅打印了onClick中的日志，JS执行脚本日志未打印，且无资源加载日志。

[Index], : resource load: window.location.hash = '# mobile-agreement'
[Index], : resource load: resource://rawfile/download/favicon.ico

1. 判断loadUrl方法是加载URL，但是不确定能否支持window.hash脚本，所以想通过全URL路径试一下能否跳转。

this.controller.loadUrl(this.controller.getOriginalUrl()+ '# /mobile-agreement');

日志信息如下：

[Index], : resource load: window.location.hash = '# mobile-agreement'
[Index], : resource load: resource://rawfile/download/favicon.ico
[Index], : resource load: https://static.pkulaw.com/policy/establishment/establishment/establishment/UseAgreement.html

实际效果页面：

【解决方案】

针对本地Html使用Hash路由，直接使用全路径跳转即可：

this.controller.loadUrl(this.controller.getOriginalUrl() + '# mobile-agreement'