vue页面中如何打开页面(直播间不关闭实现打商品详情购物)

欢迎到专业群（ uni-app 官方技术交流群 1 ） 咨询，群中有相关专业的管理员和群友。

根据知识库中的内容，针对在直播间页面内打开商品详情而不离开当前页面的需求，推荐以下方案：

方案一：使用 subnvue（推荐用于App端）

根据文档说明，在 vue 页面上可以覆盖一个 subnvue（一种非全屏的 nvue 页面覆盖在 webview 上），以解决 App 上的原生控件层级问题。详见

由于直播间通常使用 live-pusher 或 video 等原生组件，前端写的 view 等组件无法覆盖原生组件，存在层级问题处理比较麻烦。使用 subnvue 可以解决这个问题，实现商品详情窗口覆盖在直播视频上方显示，不影响用户观看直播。

方案二：使用 web-view 组件

根据知识库内容，可以在页面中放一个 webview，这样内容的链接就可以直接在应用中展示。您可以将商品详情页面通过 web-view 嵌入到直播间页面中，通过控制 web-view 的样式实现80%窗口大小的显示效果。

关于代码冗余问题

知识库中暂未找到关于如何避免将商品详情页面写两次（既作为独立页面又作为组件）的具体方案。如果您需要避免代码冗余，建议到插件市场 https://ext.dcloud.net.cn/search 搜索相关解决方案，看看是否有实现类似功能的插件可以复用现有页面代码。

补充说明

如果直播间使用了原生视频组件，建议使用 nvue 或 subnvue 方案，因为文档明确指出：解决前端控件无法覆盖原生控件的层级问题时，使用 nvue 更好。subnvue 作为非全屏的 nvue 页面覆盖层，特别适合您需要的80%窗口显示商品详情的场景。