Web component router based on Markup.
- web standards alone routing is hard to work with
- it takes time to implement a custom router
- most routers out there are framework specific
- routers out there require JavaScript code to be written and a powerful component tag simplifies that
- available routers dont handle both JavaScript and HTML files
- web components work with everything which makes it a perfect candidate for a router
<nav>
<page-link path="/">Home</page-link>
<page-link path="/contact">Contact</page-link>
</nav>
<page-route path="/">
Home content
</page-route>
<page-route path="/contact">
Contact content
</page-route>
<page-route path="/404">
404 - Page not found!
</page-route>
<page-redirect to="/404"></page-redirect>npm install @beforesemicolon/router
via CDN:
<!-- required WebComponent Markup to be present -->
<script src="https://unpkg.com/@beforesemicolon/web-component/dist/client.js"></script>
<!-- use the latest version -->
<script src="https://unpkg.com/@beforesemicolon/router/dist/client.js"></script>
<!-- use a specific version -->
<script src="https://unpkg.com/@beforesemicolon/[email protected]/dist/client.js"></script>
<!-- link you app script after -->
<script>
const { ... } = BFS.ROUTER
</script>