OJET - How do I alert a user before leaving my page?

I am working on a single page application using Oracle JET. In the page I'm building, I'm trying to alert the user when they try to leave the page without saving their changes. So when leaving the page I want to:

• Intercept the routing.
• Check if there are any changes.
• Give a popup if there are changes.
• Continue with routing if there aren't any unsaved changes.

I believe that this should be possible using the ojRouter (doc link here), but I have not gotten it to work. I have tried many approaches, but this is what I have ended up with so far:

EDIT: I have gotten a little further and managed to successfully access the canExit property, I edited my code block below. However, this still does not block routing.

oj.Router.sync().then(() => {
   const letrouterState = oj.Router.rootInstance;
   letrouterState.currentState().canExit = ableToExit();
});

function ableToExit() {
  let canExit;
  //function that will check if the page has unsaved changes
  if (ableToExit()) {
    canExit = false;
  } else {
    canExit = true;
  }
  return canExit;
}

I have also tried to use window.onhashchange. However, this only triggers an event when opening the page my page, not when leaving it.

I hope I made my problem clear and I am happy to clarify any of my request if needed. Would someone be able to help me? Thank you for your time in advance.

-Wouter

Because intervening with the entire router became a very messy solution, we have decided to adjust the requirements and not do this anymore. Thanks to anyone that tried to help. Moral of the story is not to try this :).