如何解决使用<a href>的beforeRouteLeave创建奇怪的交互
我当前正在开发一个应用程序,该应用程序涉及用户更改页面上的某些数据,以确保用户在继续浏览其他页面之前将其保存,因此我使用了RouteLeave + element-ui来创建消息作为提醒。代码kanda看起来像这样:
<template>
<div>
<div @click="this.$router.push(path)">To homePage</div>
<div :href="path">To homePage</div>
</div>
</template>
<script>
beforeRouteLeave(to,from,next) {
console.log('the start')
if (this.saveRemind) {
console.log('in if')
this.$confirm('Are you sure you want to continue?','Notice',{
distinguishCancelAndClose: true,confirmButtonText: 'Yes',cancelButtonText: 'No',type: 'warning',duration: 0
}).then(() => {
next()
console.log('in then')
}).catch(() => {
console.log('in catch')
return
})
console.log('end of confirm')
} else {
console.log('in else')
next()
}
console.log('in the end')
return
}
</script>
现在的问题是,如果单击
,一切正常,确认消息框将出现并停留在页面上,直到我决定单击“是”或“否”,但第一次单击在上,它将在消息框中显示所有内容,该框将立即出现并消失,并且在控制台中,我可以看到未打印出“ in then”或“ in catch”(打印了其他console.log)。在我的第二次点击,一切再次正常。因此,鉴于页面上的任何内容,我必须单击两次以使其正常运行,这显然不够用户友好。知道为什么我的应用程序会发生这种情况吗?
0 个答案:
没有答案
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。