用hbx创建一个hash模式的uniapp发布h5就能重现该问题
HansChen
- 发布：2021-06-16 11:56
- 更新：2024-12-04 10:06
- 阅读：2112
产品分类： uniapp/H5
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： 10.13.6
HBuilderX类型： 正式
HBuilderX版本号： 3.1.18
浏览器平台： Chrome
浏览器版本： 91.0.4472.101
项目创建方式： HBuilderX
操作步骤：
预期结果：
修改hash的参数，不重载页面
修改hash的参数，不重载页面
实际结果：
新hbx打包出来的h5项目会重载（刷新）了页面。。导致hashchange获取的信息无法正常获取，而且页面刷新用户体验也很差。
新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、重载页面的用户体验很差
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里看(源码里的注释)，是故意重载的
-
HansChen (作者)
2022-02-25 14:31
luoye22 - 无sss
在H5端，需要给url加参数，可以用 $router，暂时解决。不会触发hashchange监听导致的刷新页面
我的项目路由是hash模式。
vue2
this.$router.push({
path: '/pages/index/my',
query: { id: 22 },
})
vue3 用 useRouter
HansChen (作者)
上传不了视频，请移步youku
该bug重现视频
https://v.youku.com/v_show/id_XNTE3MDMxMDg3Ng==.html
2021-06-17 11:44
HansChen (作者)
怎么样了？有看到重现视频了吗？spa无刷新的特点没有了很难受
2021-06-22 10:35