CodingPhoenixx
35 lines
787 B
TypeScript
35 lines
787 B
TypeScript
|
|
export type Route = {
|
|
path: string;
|
|
view: () => HTMLElement;
|
|
};
|
|
|
|
export class Router {
|
|
private routes: Route[];
|
|
private outlet: HTMLElement;
|
|
onRouteChange?: (path: string) => void;
|
|
|
|
constructor(outlet: HTMLElement, routes: Route[]) {
|
|
this.routes = routes;
|
|
this.outlet = outlet;
|
|
window.addEventListener('popstate', () => this.resolve());
|
|
}
|
|
|
|
navigate(path: string) {
|
|
window.history.pushState({}, '', path);
|
|
this.resolve();
|
|
}
|
|
|
|
resolve() {
|
|
const path = window.location.pathname;
|
|
const match = this.routes.find((r) => r.path === path);
|
|
this.outlet.innerHTML = '';
|
|
this.outlet.append(
|
|
match ? match.view() : document.createElement('not-found-page')
|
|
);
|
|
|
|
if (this.onRouteChange) {
|
|
this.onRouteChange(path);
|
|
}
|
|
}
|
|
} |