同一 路由 不同参数 展示多个标签

[buildsoftwareb]

应用场景: 比如tab里面进行了订单查询, 然后点击订单编号可以跳转到订单详情页。是否支持打开多个订单详情页标签。

[vtoo]

同问。一个路由带参数可不可以 打开两个tags标签 比如 users/123 users/456

[lxlucky]

同问该问题，如有好的解决思路，麻烦分享

[gjwfiza]

强烈关注此问题，研究了好久

[islike]

1.打开的标签列表类似历史记录，修改掉标签列表不重复的限制条件，这样的话打开后没关的话，后面再打开详情页标签会重复出现在标签列表 2.订单详情页里做个选项卡功能，多个详情通过选项卡切换显示

只是想想感觉可行，没有实际实践过

[ivanvera]

现在示例页面不是已经有打开多个标签页的例子了吗

[pbwei]

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; }

[sundanyu]

强烈关注此问题，研究了好久

研究了两天，终于解决了这个问题

[sundanyu]

关于在点击列表进入到详情页，因为不关闭而重复点击打开多个详情页，且传递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]

在3中，还有个小问题，少加了个判断。。。请将其中一段替换成这个 if(res.length < 2){ }else if(res.length == currentIndex){ } else{ console.log(33); if (res[currentIndex].query.id) { this.handleClick(res[currentIndex]) } }

[manondidi]

通过这个方式解决问题了

https://github.com/iview/iview-admin/issues/943#issuecomment-437738035