A Web Component router is just the best and easiest way to lazy load content based on the URL.
Built using Markup WebComponent , it redefines how you approach routing all together allowing you to load JavaScript, HTML or text content directly from a file. When paired with reactive Markup templates, there is no limit to what you can build.
The page-link tag allows you to set an anchor tag
to take to any local route.
You may also use it to set the title for that page on navigation, override all or specific search query keys, and pass down data.
see documentationThe page-route tag allows you to conditionally render its content based on the route
or lazy load a JavaScript, HTML, or text file with the ability of specifying the loading view and fallback
in case something goes wrong.
The JavaScript files must default export a Node, a string or a Markup template. It can also default export function or Object with render method that returns a Node, a string or a Markup template.
The component also allows you to specify the title, data, and pathname params and can be nested to create more complex content hiearchy.
see documentationThe page-route-query works just like the page-route but it reacts to the search query instead of the path.
The page-redirect will catch any unknown path for you and force a redirect. It is context aware so placing it inside a page-route
will work just for the child routes.
Additionally, you can access internal APIs to use inside your JavaScript code.