点击详情页面，能打开多个详情页，详情页使用的是一个路由，
点击详情页1，跳转1号详情页，点击2号打开2号详情页
直接写个父子弹框得了 点哪个展示哪个详情页,写3个详情页有点浪费,具体实现还有看你页面接口
跳转使用：this.$router.push('/pages/a?id=1')
在a页面接收参数：this.$route.params.id
通过不同id请求不同的数据
参考，有帮助的话采纳一下哦！
在 Vue.js 中使用 Element UI 框架，可以在点击详情页时传递不同的参数来打开多个详情页。
首先，在路由配置中，可以为详情页路由设置一个动态路径参数，例如：
{
path: '/detail/:id',
component: DetailPage
}
这样，在点击详情页时，可以使用不同的 ID 值来跳转到不同的详情页。
其次,你可以在点击详情页按钮时,传递参数，这样就能打开相应详情页
<el-button @click="gotoDetail(1)">查看详情1</el-button>
<el-button @click="gotoDetail(2)">查看详情2</el-button>
最后,在跳转到对应详情页,这里使用 $router.push 方法进行跳转
methods: {
gotoDetail(id) {
this.$router.push({ path: `/detail/${id}` });
}
}
这样,就能打开不同详情页.
在详情页中，可以使用 this.$route.params.id 来获取传递的 ID 参数，进行不同的逻辑处理。
不过,还有一种方式就是使用 vuex 存储数据,进行跳转。
这可以通过在路由中使用动态路径参数实现。在定义路由时，在路径中添加一个冒号（:）作为占位符，表示这是一个动态路径参数。在组件中，可以通过 this.$route.params 访问这些参数。
例如：
const routes = [
{
path: '/detail/:id',
component: DetailPage
}
]
在组件中，通过 this.$route.params.id 就能访问到路由中的 id 参数。
然后在点击详情页时，使用router-link或者router.push()方法传递不同的参数，打开不同的页面。
<router-link :to="{ path: '/detail/1' }">详情页1</router-link>
<router-link :to="{ path: '/detail/2' }">详情页2</router-link>
this.$router.push({ path: '/detail/1' });
this.$router.push({ path: '/detail/2' });
点击打开详情页 通常只有一个页面
而页面得内容数据，一般都是在打开页面传一个id过去 然后请求接口，获取对应得数据
或者直接把列表详情页面需要得数据，在前一个（一般是列表页）把数据带过来
详情页页面其实只有一个，只不过数据不一样而已，如果想在新标签页打开，直接window.open(url+参数)得形式
如有问题，可私我
参考一下https://cloud.tencent.com/developer/article/1652791
1.在 main.js 中配置路由，比如将详情页路由设置为 '/detail/:id'。
2.在点击详情页的按钮上绑定事件，在事件中使用 $router.push() 方法跳转到相应的详情页。比如点击 1 号详情页，跳转到 '/detail/1'。
3.在详情页组件中，使用 props 传入 id 参数，根据 id 参数加载对应的详情数据。