本文已参与「新人创作礼」活动，一起开启掘金创作之路
这个需求困扰了我几天，因为我的需求是tab切换前判断当前页是否有未保存的内容，有未保存的内容要提示未保存，用户选择离开才可以切换tab。
百度了一大圈，只有一篇说如何拦截阻断element-ui里的tab，有一个触发前的钩子函数，将逻辑写在这个函数里
搜不到和antd-vue 的tab拦截阻断有关的办法，有几篇提问的文章前两年问的，一直没有人回复过。
抱着试试的态度，我自己发了问答贴，感谢热心的大佬提供了回答。
如果你也遇到了类似的需求，并且看到我这篇文章，我觉得你可以试试他们说的思路，我自己想了一下觉得不太适合我自己，经过朋友的帮助，想出了另一种解决的思路。
思路大致如下：
利用vuex保存数据的特性，在state中定义数据，在mutations中修改数据，只能使用vuex内部的方法改变数据这一点很重要，将tab的activeKey对应vuex中保存的数据，当未保存提示后，确认可以切换的时候，触发vuex保存数据的方法，将点击项的key传到方法里，这样tab绑的值都是通过手动改变。
下面就是具体的代码实现了，只保留和切换有关的，其他的就不展示了，没有必要去理解我整个的项目需求，功能能实现就行 首先在state文件夹的index文件中定义数据和操作数据的方法
state: {
active: 0,
},
mutations: {
Update_active(state,data){
state.active = data
},
}
在tab所在的页面，给activakey绑值
<a-tabs
:activeKey="$store.state.active"
:tabBarStyle="{ padding: '0 24px' }"
@change="(key) => onTabChange(key)"
>
<a-tab-pane :key="0" tab="xxx" style="padding: 0 28px">
<api-info-editor ref="one" v-if="$store.state.active == 0"></api-info-editor>
</a-tab-pane>
<a-tab-pane :key="1" tab="xxx" style="padding: 0 28px">
<api-docs-editor
v-if="$store.state.active == 1"
ref="second"
></api-docs-editor>
</a-tab-pane>
<a-tab-pane :key="2" tab="xxx" style="padding: 0">
<api-parameter-config
v-if="$store.state.active == 2"
ref="three"
></api-parameter-config>
</a-tab-pane>
</a-tabs>
在onTabChange事件里改变值
onTabChange(key) {
switch (this.$store.state.active) {
case 0:
if (this.$refs.one.apichooseFlag) {
this.$confirm(`你有未保存数据项, 是否确认离开?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
// 改变vuex的值
this.$store.commit('Update_active', key)//如果确认离开，改变vuex的值并且刷新数据
this.getDetaildata(this.documents || { fInApibaseId: this.$route.query.apiId })
})
} else {
this.$store.commit('Update_active', key)//如果取消，还是要重新保存一下值
}
break
case 1:
if (this.$refs.second.apidocsFlag) {
this.$confirm(`你有未保存数据项, 是否确认离开?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
this.$store.commit('Update_active', key)
this.getquerydocs()
this.$refs.second.apidocsFlag = false
})
} else {
this.$store.commit('Update_active', key)
}
break
case 2:
if (this.$refs.three.apiparamFlag) {
this.$confirm(`你有未保存数据项, 是否确认离开?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
this.$store.commit('Update_active', key)
this.$refs.three.apiparamFlag = false
this.getDetaildata(this.documents || { fInApibaseId: this.$route.query.apiId })
})
} else {
this.$store.commit('Update_active', key)
}
break
default:
break
}
},
