beforeRouteLeave with <a href> creates strange interaction

Question

I an currently developing an app that involves user to change some of the data on the page, to make sure the user would save before moving on to other pages, I used beforeRouteLeave + element-ui to create a message as an reminder. The code kanda looks like this:

<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>

Now the problem is that the if <div @click> is clicked, everything works fine, the confirmation message box would appear and stay on page until i decide to click 'yes' or 'no', but on my first click on , it would go streight through the message box, the box will appear and disappear instantly, and in console I can observe that 'in then' or 'in catch' are not printed(other console.log are printed). On my second click on , everything works fine again. Thus given any on the page, I have to click it twice to make it work properly and this is obviously not user friendly enough. Any idea why this is happening to my app?