HarmonyOS 鸿蒙Next中web事件onLoadIntercept监听不到vue router（router-view）跳转变化

HarmonyOS 鸿蒙Next中web事件onLoadIntercept监听不到vue router（router-view）跳转变化 各位大佬们好，我们APP是内嵌的前端vue页面，我们有些需求需要根据路由来做特殊处理，但是我们发现一个问题。像Android中的webview存在shouldOverrideUrlLoading方法可以监听到路由变化，但是鸿蒙中的onLoadIntercept只能监听到第一次加载vue页面的时候的路由变化，我们第一次是使用的

this.webController?.loadUrl(xxx)

加载的，这个时候onLoadIntercept能监听到，后面再使用loadUrl也监听不到，请问大佬们有没有碰到这个问题，目前倒是有一个onInterceptRequest可以拦截到，但是我看他资源文件都拦截到了，我想不得已暂时不用这种。谢谢。


更多关于HarmonyOS 鸿蒙Next中web事件onLoadIntercept监听不到vue router（router-view）跳转变化的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS鸿蒙Next中，web组件onLoadIntercept事件主要监听网页载入行为，无法直接捕获Vue Router的客户端路由跳转（router-view）。因为Vue Router属于SPA前端路由，通过History API或hashchange实现页面组件切换，不触发网页实际重载。

若需监听路由变化，应在Vue组件中使用Vue Router的导航守卫（beforeEach/afterEach），或监听$route对象变化。鸿蒙webview可通过与Vue应用建立JSBridge通信，主动通知原生端路由变更。

更多关于HarmonyOS 鸿蒙Next中web事件onLoadIntercept监听不到vue router（router-view）跳转变化的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，Web组件的事件监听机制确实与Android WebView有所不同。针对您提到的vue router路由变化监听问题，建议可以尝试以下解决方案：

  1. 使用onUrlLoadChange监听替代方案： HarmonyOS Web组件提供了onUrlLoadChange回调，可以尝试使用这个API来监听URL变化：
webview.on('urlLoadChange', (event) => {
  console.log('URL changed:', event.url);
});
  1. 与前端配合的解决方案： 可以让前端在vue router的全局守卫中主动通知原生端：
// 前端代码
router.beforeEach((to, from, next) => {
  window.JSBridge?.postMessage('routeChange', {to: to.path});
  next();
});
  1. 性能优化的拦截方案： 如果必须使用onInterceptRequest，可以通过判断请求类型来优化性能：
webview.onInterceptRequest((request) => {
  if (request.url.endsWith('.html') || request.url.includes('router-change')) {
    // 处理路由变化逻辑
  }
  return request;
});

这些方案可以根据您的具体场景选择使用，建议优先考虑第一种或第二种方案。

回到顶部