利用vuex关闭当前tab页签
如图: 点击删除按钮,关闭当前tab页签在vuex的js文件中写如下方法:(如果没有vuex的js文件,可以自己写一个,参考另外一篇文章,讲解vuex的)/*** @class closeNow* @description 关闭当前界面页签(如在工作项详情界面,点击删除按钮,关闭当前这个页签)* @param {Object} state vuex state* @param {Object} p
·
在vuex的js文件中写如下方法:(如果没有vuex的js文件,可以自己写一个,参考另外一篇文章,讲解vuex的)
/**
* @class closeNow
* @description 关闭当前界面页签(如在工作项详情界面,点击删除按钮,关闭当前这个页签)
* @param {Object} state vuex state
* @param {Object} param { tagName: 要关闭的标签名字, vm: vue }
*/
closeNow ({ state, commit, dispatch }, { tagName, vm }) {
return new Promise(async resolve => {
// 下个新的页面
let newPage = state.opened[0]
// 如果关闭的页面就是当前显示的页面
// 去找一个新的页面
let len = state.opened.length
for (let i = 1; i < len; i++) {
if (state.opened[i].name === tagName) {
if (i < len - 1) {
newPage = state.opened[i + 1]
} else {
newPage = state.opened[i - 1]
}
break
}
}
// 找到这个页面在已经打开的数据里是第几个
const index = state.opened.findIndex(page => page.name === tagName)
if (index >= 0) {
// 更新数据 删除关闭的页面
state.opened.splice(index, 1)
// 如果这个页面是缓存的页面 将其在缓存设置中删除
commit('keepAliveRemove', tagName)
}
// 持久化
await dispatch('opend2db')
// 最后需要判断是否需要跳到首页
// if (isCurrent) {
const { name = '', params = {}, query = {} } = newPage
let routerObj = {
name,
params,
query
}
vm.$router.push(routerObj)
// }
// end
resolve()
})
},
在当前界面,用逻辑判断,是否需要关闭当前tab页签,三步
第一步:
引入vuex
import { mapActions } from 'vuex' /** 删除当前界面步骤 */
第二步:
在methods中,注入
/** 删除当前界面步骤 */
...mapActions('d2admin/page', ['closeNow']),
第三步: 删除方法中做逻辑判断
/** 删除当前界面步骤 */
const list = this.$store.state.d2admin.page.opened
list.find((v,index)=>{
if(index>0 && v.path === this.$route.path.substring(0,this.$route.path.length-1)){
this.closeNow({
tagName: v.name,
vm: this
})
更多推荐
已为社区贡献13条内容
所有评论(0)