Prevent route change in vaadin router in middle of some other task.

[Krishuthapa]

I am using vaadin router in LitELement. I have a vaadin upload component on one page. While uploading the content, if by mistakenly I change the route. In that case, I need to show a confirmation popup for the user. So how do I prevent this route change behavior by default and carry on the action depending on the option selected by the user in the confirmation?

Somewhat like onbeforeunload which works only when reloading the page, is there any event or method in vaadin to mimic that kind of feature in route change.

I don't want this feature for all the route changes. This should just be triggered whenever I am in middle of doing something and mistakenly I change the route.

[haijian-vaadin]

Hi @Krishuthapa, good to hear that you are using vaadin-router. For your use case, I think you can use the onBeforeLeave lifecycle callback. You can find the documentation here. We also have a helper interface BeforeLeaveObserver to make it typesafe, for example, you can define your view like

class MyViewWithBeforeLeave extends LitElement implements BeforeLeaveObserver {
  onBeforeLeave(
      location: RouterLocation,
      commands: PreventCommands,
      router: Router) {
        if (!window.confirm('Are you sure you want to leave?')) {
          return commands.prevent();
        }
  }
}

[Krishuthapa]

@haijian-vaadin thank you very much for the reply. I will try and see if it works for my use case.

[malindalin]

@haijian-vaadin I see the docs mention commands.prevent will abort the navigation and fall back to the last one, will the router location object also update itself to match the navigation/location it's falling back to?