- vue 页面刷新
- 进入 nvue 页面
- 再次刷新
- 返回 vue 页面
yuanyxh
- 发布：2023-11-16 14:41
- 更新：2023-11-16 15:06
- 阅读：180
产品分类： uniapp/H5
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： window 10
HBuilderX类型： 正式
HBuilderX版本号： 3.97
浏览器平台： Chrome
浏览器版本： 119
项目创建方式： HBuilderX
App下载地址或H5⽹址： https://www.u-area.com/m/
操作步骤：
预期结果：
样式逻辑正常
样式逻辑正常
实际结果：
样式混乱，无法滑动
样式混乱，无法滑动
bug描述：
在 vue 页面刷新，进入 nvue 页面，再次刷新，返回 vue 页面，此时样式错乱；检查元素发现 body 身上存在属性 nvue、nvue-dir-column。
返回 vue 页时默认删除这两个属性的方法无效，虽然样式正常，但页面无法滑动。
yuanyxh (作者) - 站在巨人的肩膀上
目前通过以下方式可以解决：H5 端，在 vue 页面的 onShow 生命周期中，判断 body 身上是否存在 nvue 等属性，如果存在则替换当前页面的历史记录
export default {
onShow() {
// #ifdef H5
const attrs = document.body.attributes;
for (let i = 0; i < attrs.length; i++) {
if (attrs[i].name.startsWith('nvue')) {
this.$router.replace({ name: this.$route.name });
break;
}
}
// #endif
}
}