Skip to content

Router

Router is a standalone package. Install only if your application requires client routing:

bash
pnpm add @elfui/router

It can also be added by scaffolding when creating the project:

bash
pnpm create elfui@beta my-app --router --install

Create the route in a standalone module and import it before mounting the application:

ts
// src/router/index.ts
import { createRouter } from "@elfui/router";

export const router = createRouter({
  mode: "hash",
  routes: [
    { path: "/", component: () => import("../pages/Home") },
    { path: "/about", component: () => import("../pages/About") }
  ]
});
ts
// src/main.ts
import "./router";
import { createApp } from "@elfui/core";
import App from "./App";

createApp(App).mount("#app");
html
<elf-link to="/">首页</elf-link> <elf-router-view></elf-router-view>

createRouter() will activate routing and register routing elements, support hash, history, memory mode, nested routing, guard, redirection, alias and asynchronous components.