HarmonyOS 鸿蒙Next中不支持加载本地html带hash值

HarmonyOS 鸿蒙Next中不支持加载本地html带hash值

Web({ src: "resource://rawfile/dist/index.html#/test", controller: this.webviewController})

Web组件加载本地index.html通过src的rawfile和source可以访问index.html但是如果加载vue打包后的路由index.html#/test则打开的页面不会跳转路由是什么原因，https是可以的，本地页面就不可用跳转hash值，os是5.几的浏览器是114版本的正常应该都可以的啊，官网也没有解释为什么


更多关于HarmonyOS 鸿蒙Next中不支持加载本地html带hash值的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

Webview如何加载带有#路由的链接

Web组件的src使用’resource://rawfile/LoadWebLink.html#AAA’这种格式进行加载，具体可参考如下代码：

import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct LoadWebLink {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    RelativeContainer() {
      Web({ src: 'resource://rawfile/LoadWebLink.html#AAA', controller: this.controller })
    }
    .height('100%')
    .width('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next中不支持加载本地html带hash值的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


加油，

在HarmonyOS鸿蒙Next中，Web组件无法通过file://协议加载包含hash值的本地HTML文件。这是由于系统安全策略限制了本地文件访问时的URL参数解析。若需加载本地资源，建议使用data URI或通过Web服务器方式提供内容，并确保URL不包含hash片段。

在HarmonyOS Next中，Web组件加载本地HTML文件时，通过resource://rawfile/或source方式访问确实不支持处理URL中的hash值（如index.html#/test）。这是因为本地文件加载机制与网络请求不同，系统不会将hash部分作为路由参数传递给页面。

当使用src: "resource://rawfile/dist/index.html#/test"时，系统仅加载index.html文件，而忽略#/test部分。因此，Vue等框架的路由无法基于hash进行跳转。相比之下，HTTPS方式可以正常处理hash，因为浏览器会解析完整URL。

解决方案：

  1. 使用WebMessagePort或Web JavaScript Bridge在Web组件和本地代码间通信，通过消息传递路由参数。
  2. 将Vue路由模式改为history模式（需配合服务器配置，本地文件可能受限）。
  3. 在加载本地HTML后，通过runJavaScript()方法动态设置路由状态。

示例代码：

// 在Web组件onPageEnd中注入路由逻辑
webviewController.runJavaScript(
  `window.location.hash = '/test';`
);

此行为是系统设计限制，非浏览器版本问题。建议优先通过通信机制管理路由状态。

回到顶部