iview项目关闭tab对应的路由页面

嘿是我呀

已于 2023-10-23 16:46:50 修改

阅读量241

点赞数

文章标签： view design vue.js

于 2023-10-23 16:37:01 首次发布

本文链接：https://blog.csdn.net/weixin_42998230/article/details/133993181

版权

业务背景：在打开的编辑tab页面中，当完成业务后需要关闭对应tab页面并回到列表页面。

// 获取已经打开的标签路由并筛选出当前路由数组（当前路由有可能打开多个tab标签页）
let arr = this.$store.state.app.tagNavList.filter(item => item.name == 'iop.production.invoice.add')
//筛选出多个tab中的当前tab
let tagArr = arr.filter(item => item.query.id == this.invoiceForm.id)
/从vuex中移除此tab
this.$store.commit("closeTag", tagArr[0])
//跳转至list页面
this.$router.push('/production/invoice/list')

当打开的tab页面是新增等无路由传值的页面，有且只能打开同路由下的一个页面，当完成业务后关闭对应tab页面并回到列表页面。

// 获取已经打开的标签路由并筛选出当前路由数组
let arr = this.$store.state.app.tagNavList.filter(item => item.name == 'iop.production.invoice.add')
/从vuex中移除此tab
this.$store.commit("closeTag", arr [0])
//跳转至list页面
this.$router.push('/production/invoice/list')