应用场景: 比如tab里面进行了订单查询, 然后点击订单编号可以跳转到订单详情页。是否支持打开多个订单详情页标签。
buildsoftwareb
All 10 comments
同问。一个路由带参数可不可以 打开两个tags标签
比如 users/123 users/456
vtoo
on 29 May 2018
同问该问题，如有好的解决思路，麻烦分享
lxlucky
on 3 Jul 2018
强烈关注此问题，研究了好久
gjwfiza
on 10 Jul 2018
1.打开的标签列表类似历史记录，修改掉标签列表不重复的限制条件，这样的话打开后没关的话，后面再打开详情页标签会重复出现在标签列表
2.订单详情页里做个选项卡功能，多个详情通过选项卡切换显示
只是想想感觉可行，没有实际实践过
islike
on 18 Jul 2018
现在示例页面不是已经有打开多个标签页的例子了吗
ivanvera
on 11 Mar 2019
export const routeEqual = (route1, route2) => {
// const params1 = route1.params || {}
// const params2 = route2.params || {}
// const query1 = route1.query || {}
// const query2 = route2.query || {}
// return (route1.name === route2.name) && objEqual(params1, params2) && objEqual(query1, query2)
return route1.name === route2.name;
}
pbwei
on 17 May 2019
强烈关注此问题，研究了好久
研究了两天，终于解决了这个问题
sundanyu
on 27 Jun 2019
关于在点击列表进入到详情页，因为不关闭而重复点击打开多个详情页，且传递ID不同，出现只显示最后一个ID的数据，这个bug研究了两天。终于解决，代码如下：
1.传值，我用了这个方法
this.$router.push({
name: 'enterpriseInfo',
query: {
id:index
}
})
2.接收时，用vue的两个钩子处理，这样在点击每个详情标签时，因为传递ID值变了会触发beforeUpdate钩子，只要在这两个钩子中发请求拿数据即可正常渲染页面。
created () {
console.log(this.$route.query.id)
},
beforeUpdate () {
console.log(this.$route.query.id)
console.log(this.msg)
}
3.还没完，需要解决bug，因为标签能关闭，而且你不能要求用户关闭的是哪个详情页，经尝试，如果关闭的是一大堆详情页中的某一个，另外的详情页数据还是会出现bug（正常应该显示当前标签页ID的数据）,这里需要处理tags-nav.vue页中的代码。具体如下：改造close函数成如下：
close (route) {
let currentIndex = this.getArrIndex(this.list,route)
let res = this.list.filter(item => !routeEqual(route, item))
if(res.length < 2){
}else{
if (res[currentIndex].query.id) {
this.handleClick(res[currentIndex])
}
}
this.$emit('on-close', res, undefined, route)
},
其中getArrIndex函数，是处理当前标签的query.id的index索引，判断标签栏下一个选中项是否有query.id,如果有就调用handleClick方法，这样避免出现另外的标签页数据不正确，getArrIndex函数如下：
getArrIndex (arr, obj) {
let index = null;
let key = Object.keys(obj)[0];
arr.every(function(value, i) {
if (value[key] === obj[key]) {
index = i;
return false;
}
return true;
});
return index;
},
以上就是query传值，点击出现多个详情页，解决详情页切换数据无变化的bug，代码有些笨拙，小白一枚，大家海涵。
最后，因为传值总是出现问题，就尝试用了下VUEX传，解决是解决了，但是太坑了，不说了。
sundanyu
on 27 Jun 2019
在3中，还有个小问题，少加了个判断。。。请将其中一段替换成这个
if(res.length < 2){
}else if(res.length == currentIndex){
}
else{
console.log(33);
if (res[currentIndex].query.id) {
this.handleClick(res[currentIndex])
}
}
sundanyu
on 27 Jun 2019
通过这个方式解决问题了
https://github.com/iview/iview-admin/issues/943#issuecomment-437738035
manondidi
on 23 Oct 2020
Related issues
330132662
·
4Comments
zhangwei900808
·
5Comments
Sean0626
·
3Comments
tinnkm
·
4Comments
Miku-Zeng
·
3Comments
Most helpful comment
同问该问题，如有好的解决思路，麻烦分享