Skip to main content


Routers are used to replace a component on a route placeholder, without refreshing the page.


<a route-to="/home">Home</a>
<a route-to="/tab/{tabId}">Tab</a>
import Creamie from "@creamie/core";
import AppConfig from "./app-config.js";
import Router from "@creamie/core/router.js";
import Home from "./home.js";
import Tab from "./tab.js";
class App extends Creamie {
constructor() {
let router = new Router("route-app", {
"/home": Home,
"/tab/{tabId}": Tab,
// To route in js
// router.navigateTo('/tab');
// we can acces tabId param like below
// console.log(router.params.tabId);
* create your methods below
window.customElements.define(AppConfig.tag, App);

When this example is implemented, the web page would have two hyperlinks—Home and Tab. Clicking on those would not redirect the user to a new page, but load that component in the existing page—thereby increasing your web app's speed and efficiency.