Quasar: prevent backbutton goback to previous page without confirmation

[channimol]

I am using the Quasar CLI version 0.15.20 and using $q.dialog for confirmation. I want to control the backbutton on android device not to go back to previous page if the user doesnt confirm to leave. I used this below function but it doesnt work. It keeps going back before the dialog pop up asking to leave the page. any idea how to prevent it?

     backButton (e){
             e.preventDefault()
             if (this.$route.name === 'session-show') {
                this.$q.dialog({
                    title: 'Warning',
                    message: 'Are you sure you want to leave without save?',
                    ok: 'Yes',
                    cancel: 'Cancel'
             }).then(() => {
                    this.$router.go(-1)
                    this.$q.notify('Data is removed!')
             }).catch(() => {
                    console.log('stay in current page')
             })
         }
     }

and I call this event

     document.addEventListener('backbutton', this.backButton, false)

and it seems to have problem with both button back inside app and on device, some pages I need to press it twice to go back and sometime it go to multiple back history. could you tell me why?

[shandrolis]

This may be what you're looking for.

Vue offers a beforeRouteLeave navigation hook.

beforeRouteLeave (to, from, next) { 
  const answer = window.confirm('Do you really want to leave? You have unsaved changes!')
  if (answer) {
    next()
  } else {
    next(false)
  }
}

[channimol]

@shandrolis thank to your answer I have solved my problem now.