route-it
Dead simple no framework, vanilla js single page router.
This package brings a tiny basis for implementing spa routing to your application. It handles <base href>, popstate (back button) and switching pages/components.
You implement a method which resolves paths to plain HTML Elements or web components.
It depends on your applications needs how sophisticated that is. Sometimes a simple switchcase is enough, sometimes you might want to extract path & query parameters from the URL or even run async operations before resolving a component.
Usage
Configure the <base href="/simple/">.
Create a route resolver for your application. The resolver maps the paths under the base href and returns HTML Elements, which are then used as pages.
class MyApplicationRouteResolver {
resolve(lastRoute, currentRoute, router) {
switch (currentRoute) {
case "page1-div": // route /simple/page1-div
let div = document.createElement("div");
...
return div;
case "page2-webcomponent": // route /page2-webcomponent
let component = new SomeFancyComponent();
return component;
case "":
return homePage;
default:
return false;
}
}
}Create the router and assign the route resolver and a route renderer. The route renderer receives the element returned by the resolver and, e.g. adds it to the dom. There are two route renderers available:
-
BodyChildRouteRenderer: Accepts HTMLElement and places them as child of the body -
ContainerRouteRenderer: Accepts HTMLElement and places inside a container element, which is handed via constructor parameter
new Router(new MyApplicationRouteResolver(), new BodyChildRouteRenderer())
.run();