T8 Router

🔹 Concise API for SPA navigation

let route = new Route();

route.observe(document); // switch links to SPA navigation mode

- window.location.assign("/intro");
+ route.assign("/intro"); // SPA navigation

- window.location.href = "/intro";
+ route.href = "/intro"; // SPA navigation

🔹 Flexible URL pattern matching for URL-based rendering

header.className = route.href === "/" ? "full" : "compact";

header.className = route.at("/", "full", "compact");
// at "/" ? "full" : "compact"

let sectionTitle = route.at(
  /^\/sections\/(?<id>\d+)\/?/,
  ({ params }) => `Section ${params.id}`
);
// at "/sections/<id>" ? "Section <id>" : undefined

🔹 Navigation middleware

route.on("navigationstart", callback);
// e.g. to redirect or prevent navigation

route.on("navigationcomplete", callback);
// e.g. to set the document's title