lite-routing
v2.0.0
Published
A lightweight single-page application router using web components.
Downloads
8
Readme
Light Router A lightweight, web-components-based SPA router for building simple single-page applications.
#Installation
npm install lite-routing #Usage #Define Components javascript
import { Link, Route, Router } from 'lite-routing';
class HomePage extends HTMLElement {
connectedCallback() {
this.innerHTML = <h1>Welcome to Home Page</h1>;
}
}
class AboutPage extends HTMLElement {
connectedCallback() {
this.innerHTML = <h1>About Us</h1>;
}
}
class ProductPage extends HTMLElement {
connectedCallback() {
const params = JSON.parse(this.getAttribute('path'));
const productId = params.id; // Get the product ID from the params
this.innerHTML = <h1>Product ID: ${productId}</h1>;
}
}
customElements.define('product-page',ProductPage);
customElements.define('home-page', HomePage);
customElements.define('about-page', AboutPage);
#Add Routes in HTML