uni-app H5修改hash模式的URL参数会导致页面重载 以前旧的hbx2.8.11版本不会重载

uni-app H5修改hash模式的URL参数会导致页面重载 以前旧的hbx2.8.11版本不会重载

信息类别 信息内容
产品分类 uniapp/H5
开发环境 Mac
操作系统版本 10.13.6
IDE HBuilderX
IDE版本 3.1.18
浏览器 Chrome
浏览器版本 91.0.4472.101
项目创建方式 HBuilderX

操作步骤：

用hbx创建一个hash模式的uniapp发布h5就能重现该问题

预期结果：

修改hash的参数，不重载页面

实际结果：

新hbx打包出来的h5项目会重载（刷新）了页面。。导致hashchange获取的信息无法正常获取，而且页面刷新用户体验也很差。

bug描述：

例如这样一个网址：

http://127.0.0.1:8080/#/pages/extUI/card/card?action=1

我们需要将action=1修改为action=2然后触发监听

window.addEventListener('hashchange', function () { console.log('action doing', window.location.hash) }, false);

但是新hbx打包出来的h5项目会重载（刷新）了页面。。导致hashchange获取的信息无法正常获取，而且页面刷新用户体验也很差。

  1. 我们依赖于hash的改变来做一下事件操作，重载会导致交互信息丢失
  2. 重载页面的用户体验很差

更多关于uni-app H5修改hash模式的URL参数会导致页面重载 以前旧的hbx2.8.11版本不会重载的实战教程也可以访问 https://www.itying.com/category-93-b0.html

16 回复

录个视频看下

更多关于uni-app H5修改hash模式的URL参数会导致页面重载 以前旧的hbx2.8.11版本不会重载的实战教程也可以访问 https://www.itying.com/category-93-b0.html


上传不了视频，请移步youku 该bug重现视频 https://v.youku.com/v_show/id_XNTE3MDMxMDg3Ng==.html

怎么样了？有看到重现视频了吗？spa无刷新的特点没有了很难受

问题已确认，已加分，后续优化

这个问题修复了吗？

新版本依旧没修复。特别着急，我们的项目依赖这个特性的，之前一直用老版本打包，现在老版本太旧了。。越来越迫在眉睫

这个问题是不是还没修复？使用cli方式创建的项目，版本：2.0.0-32920210927002，history模式。目前打包出来的h5，改变hash时会刷新页面。

到现在都没修复

请问问题修复了吗??

新版本依旧没修复。

window.addEventListener(supportsPushState ? ‘popstate’ : ‘hashchange’, function (e) {
var current = this$1.current;
if (!ensureSlash()) {
return
}

  // fixed by xxxxxx  
  var id = e.state && e.state.id;  
  if (!id) {  
    // 当手动切换页面时，强制刷新  
    return window.location.reload()  
    // id = router.id  
  }  

  this$1.transitionTo({  
    path: getHash(),  
    params: {  
      __id__: id  
    }  
  }, function (route) {  
    if (supportsScroll) {  
      handleScroll(this$1.router, route, current, true);  
    }  
    if (!supportsPushState) {  
      replaceHash(route.fullPath, route.params.__id__);  
    }  
  });  
});

从打包后的chunk-vender里看(源码里的注释)，是故意重载的

这个问题修复了吗，现在特别难受啊啊

问题修复了吗? cli版本一直在刷

hbuild x 4.36 打包h5 hash模式修改hash也还会刷新
问题修复了吗

在H5端，需要给url加参数，可以用 $router，暂时解决。不会触发hashchange监听导致的刷新页面 我的项目路由是hash模式。 vue2 this.$router.push({ path: ‘/pages/index/my’, query: { id: 22 }, })
vue3 用 useRouter

在 uni-app H5 的较新版本中，确实存在修改 hash 参数时页面重载的问题，这与旧版本（如 HBuilderX 2.8.11）的行为不同。这通常是由于框架内部路由机制升级导致的，新版本可能对 hash 模式的路由变化进行了更严格的处理，从而触发了页面刷新。

要解决这个问题，可以尝试以下方法：

  1. 检查路由配置：在 pages.json 中确认是否使用了正确的路由模式。对于 H5，确保未强制启用 history 模式，因为 hash 模式应避免页面重载。
  2. 使用 uni-app 路由 API：避免直接操作 window.location.hash，改用 uni.navigateTo 或 uni.redirectTo 来修改参数，例如：
    uni.redirectTo({
  url: '/pages/extUI/card/card?action=2'
});
回到顶部