Vue3 实现当前系统页面打开外部链接标签，非新开一个网站页签
需求场景
在当前管理系统页面中，通过新标签页打开一个 uni-app 打包的 H5 页面，要求：
- 以 iframe 方式嵌套显示外部链接
- 通过 URL 参数传递内容数据
- 保持系统统一的页签样式
结果展示
核心实现代码
1. 路由设置参考
{path: '/external',component: Layout,name: 'External',meta: {hidden: true},children: [{path: 'app-h5',component: () => import('@/views/APPH5.vue'),name: 'AppH5',meta: {title: 'AppH5',noCache: true,hidden: true,canTo: true,icon: '',}}]}
2. 中间组件 AppH5.vue
<template><div class="iframe-container"><iframe :src="iframeUrl" class="mobile-iframe" sandbox="allow-scripts allow-same-origin"></iframe></div>
</template><script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'const iframeUrl = ref('')
const route = useRoute()onMounted(() => {const query = route.queryconst token = query.tokenconst appH5Url = import.meta.env.VITE_APP_H5_URL// 构建外部链接的 URLconst url = `${appH5Url}/#/pages/posting?token=${token}`iframeUrl.value = url
});
</script>
<style scoped>
.iframe-container {position: relative;width: 100%;height: 100vh;display: flex;justify-content: center;
}.mobile-iframe {width: 400px;height: 80%;border: 3px solid #ddd;border-radius: 8px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
</style>3、任意按钮点击事件中这样跳转
const router = useRouter()
const clickMethod = () => {router.push({path: '/external/app-h5',query: {token:token}})
}
bug（参考）
开发
系统地址：http://localhost:8080
跳转app-h5地址：http://localhost:9090
本地一切正常
放到服务器就出大问题了，因为服务器二者地址分别为
系统地址：http://10.12.12.12:8000/sys
跳转app-h5地址：http://10.12.12.12:8000/app-h5/#/pages/posting
问题描述：新打开页签无法关闭，一点击关闭就重定向登录，同样点其他标签也会重定向登录页，怀疑是iframe跳转地址将系统地址的路由修改了，后续通过修改app-h5访问端口为8080，与系统端口区分，问题得以解决。