v146 · JavaScript · Navigation · demo
SPA Router
A simulated single-page app router using the Navigation API. The precommit handler starts the loading bar and registers a post-commit handler. The post-commit handler updates the page title and content once the URL has committed. The event timeline shows the exact sequence — precommit → URL changes → post-commit → finish.
Chrome 146+ —
navigation.addEventListener('navigate', e => e.intercept({ precommit, handler })) with transitionWhile() and the commit handler. Falls back to hashchange-based routing in older browsers.
Click a nav link to trigger a navigation · observe the precommit / post-commit phases in the timeline · use Back/Forward to navigate history
Navigation event timeline
——Click a nav link to start
// Navigation API with precommit + post-commit handler — Chrome 146
navigation.addEventListener('navigate', event => {
event.intercept({
// Runs BEFORE the URL changes (precommit phase)
precommit() {
showLoadingBar();
// URL is still the old one here: location.pathname === '/old-page'
},
// Runs AFTER the URL commits (post-commit, equivalent to old 'handler')
async handler() {
// URL has changed: location.pathname === '/new-page'
await fetchPageData();
renderPage();
hideLoadingBar();
},
});
});