page.js library: how to enable onbeforeunload?

Question

I'm building a single-page application using page.js as the router. The default window.onbeforeunload event doesn't seem to fire when changing pages within the SPA. How can I implement something similar, allowing me to selectively cancel the page transition if the user decides not to proceed? (i.e. "your changes are not saved: ok to discard changes?")

Thanks!

Answer 1

To prevent the address bar from changing and effectively stop the page processing, inside the show function, set context.handled = false. This stops the pushState action within page.js, preventing the address bar from changing.

Example:

page('/prevent-access', (context, next) => { context.handled = false }) // Prevents URL change to this page.