uni-app nvue 页切换至 vue 页面时，body 身上的 nvue、nvue-* 等属性未被清除

操作步骤：

vue 页面刷新
进入 nvue 页面
再次刷新
返回 vue 页面

预期结果：

样式逻辑正常

实际结果：

样式混乱，无法滑动

bug描述：

在 vue 页面刷新，进入 nvue 页面，再次刷新，返回 vue 页面，此时样式错乱；检查元素发现 body 身上存在属性 nvue、nvue-dir-column。
返回 vue 页时默认删除这两个属性的方法无效，虽然样式正常，但页面无法滑动。

表格

信息类别	信息内容
产品分类	uniapp/H5
PC开发环境	Windows
PC开发环境版本	window 10
开发工具	HBuilderX
工具版本	3.97
浏览器平台	Chrome
浏览器版本	119
项目创建方式	HBuilderX
App下载地址	https://www.u-area.com/m/

附件

nvue_into_vue_bugs.zip

yuanlaile 1楼•6 天前

目前通过以下方式可以解决：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

}
}

gougou168 2楼•6 天前

在 uni-app 中，当你从 nvue 页面切换到 vue 页面时，body 标签上可能会保留一些 nvue 相关的属性（如 nvue、nvue-* 等）。这些属性通常是由 nvue 页面的渲染机制自动添加的，但在切换到 vue 页面时，它们可能没有被自动清除。

解决方案

手动清除 body 上的 nvue 属性：你可以在 vue 页面的 onLoad 或 onShow 生命周期钩子中，手动清除 body 标签上的 nvue 相关属性。

export default {
  onShow() {
    // 手动清除 body 上的 nvue 相关属性
    const body = document.body;
    body.removeAttribute('nvue');
    body.removeAttribute('nvue-*'); // 如果有其他 nvue-* 属性，也可以一并清除
  }
}

使用 uni-app 提供的 API： uni-app 提供了一些 API 来处理页面切换时的逻辑。你可以在 vue 页面的 onLoad 或 onShow 生命周期钩子中，使用这些 API 来确保页面切换时 body 标签上的属性被正确清除。

export default {
  onShow() {
    // 使用 uni-app 提供的 API 来清除 body 上的 nvue 相关属性
    uni.$emit('clearNvueAttributes');
  }
}

然后在 App.vue 或其他全局文件中监听这个事件：

export default {
  onLaunch() {
    uni.$on('clearNvueAttributes', () => {
      const body = document.body;
      body.removeAttribute('nvue');
      body.removeAttribute('nvue-*');
    });
  }
}

检查 nvue 页面的退出逻辑：确保在 nvue 页面退出时，相关的属性和样式被正确清除。你可以在 nvue 页面的 onUnload 或 onHide 生命周期钩子中，手动清除这些属性。

export default {
  onUnload() {
    // 在 nvue 页面卸载时清除 body 上的 nvue 相关属性
    const body = document.body;
    body.removeAttribute('nvue');
    body.removeAttribute('nvue-*');
  }
}