使用<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 (将#修改为@）

html javascript vue.js