What is the best practice to cancel tour if user click back browser button?

[jarooda]

I can prevent user for clicking other button component that route to outside current component using overlay.

But if user clicking back browser button, the tour is still running.

so i use navigation guard and search the classname like this

beforeRouteLeave (to, from, next) {
    const tourOverlay =  document.getElementsByClassName('shepherd-modal-is-visible')[0]
    const tourStep = document.getElementsByClassName('shepherd-enabled')[0]

    if (tourOverlay && tourStep) {
      tourOverlay.remove()
      tourStep.tourStep()
    }

    next()
}

Is there a best practice to achieve this?

[RobbieTheWagner]

@jarooda I am not sure what you mean here. If the user clicks the back button, wouldn't the tour go away on its own?

[jarooda]

hi @rwwagner90 , I create a reproduction of my bug here https://github.com/jarooda/test-vue-shepherd

step to produce

1. run app
2. go to /about using link in nav

3. click back using browser button

thanks