vue router 组件内导航守卫 beforeRouteLeave用法,离开界面提示未保存
1.在methods外面添加beforeRouteLeave方法beforeRouteLeave(to, from, next) {console.log('beforeRouteLeave come in');if(this.isSaved === false){setTimeout(()=>{this.$confirm('您还未保存页面内容,是否保存当前更改?', '提示', {
·
1.在methods外面添加beforeRouteLeave方法
beforeRouteLeave(to, from, next) {
console.log('beforeRouteLeave come in');
if(this.isSaved === false){
setTimeout(()=>{
this.$confirm('您还未保存页面内容,是否保存当前更改?', '提示', {
confirmButtonText: '是',
cancelButtonText: '否',
type: 'warning',
closeOnClickModal:false,
closeOnPressEscape:false,
closeOnHashChange: false
}).then(() => {
this.saveItem()
this.isSaved=true
next()
}).catch(()=>{
this.$message({
message:'配置明细未改变',
type:'info'
})
this.isSaved=true
next()
})
},200)
}else{
next()
}
},
2.在页面保存方法里添加开关
当进入这个方法时,就是主动保存,这时按钮会变成true
async saveItem() {
this.isSaved=true;
console.log(this.updateItemData);
if (this.updateData.length > 0) {
for (let i = 0; i < this.updateData.length; i++) {
this.addItemform = {};
this.addItemform.examConfigId = this.updateData[i].examConfigId;
this.addItemform.categoryId = this.updateData[i].categoryId;
this.addItemform.subjectTypeId = this.updateData[i].subjectTypeId;
this.addItemform.itemDifficult = this.updateData[i].itemDifficult;
this.addItemform.num = this.updateData[i].num;
this.addItemform.score = this.updateData[i].score;
this.addItemform.itemStatus = this.updateData[i].itemStatus;
console.log(this.addItemform);
await this.selAddItemData();
}
this.$message.success('添加明细成功');
this.updateData = [];
}
if (this.updateItemData.length > 0) {
for (let i = 0; i < this.updateItemData.length; i++) {
this.editItemform = {};
this.editItemform.itemId = this.updateItemData[i].itemId;
this.editItemform.categoryId = this.updateItemData[i].categoryId;
this.editItemform.subjectTypeId = this.updateItemData[i].subjectTypeId;
this.editItemform.itemDifficult = this.updateItemData[i].itemDifficult;
this.editItemform.num = this.updateItemData[i].num;
this.editItemform.score = this.updateItemData[i].score;
this.editItemform.itemStatus = this.updateItemData[i].itemStatus;
this.editItemform.itemVersion = this.updateItemData[i].itemVersion;
console.log(this.editItemform);
await this.editItemData();
}
this.$message.success('修改明细成功');
this.updateItemData = [];
}
if (this.delItemList.length > 0) {
console.log(this.delItemList);
await this.delItemData();
this.$message.success('删除 ' + this.delItemList.length + ' 条明细成功');
this.delItemList = [];
}
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)