简单的 HTML
路由。

适用于 HTML 优先应用程序的小型 Web Component 路由器。按路径名或搜索查询进行路由、延迟加载 HTML/JS/TXT 页面、嵌套路由布局、保护受保护的屏幕，并使框架锁定在导航层之外。

5WEB COMPONENTS

0配置

HTMLJS - TXT 页

html
<!-- index.html — zero JavaScript required -->
<nav>
    <page-link path="/" title="Home">Home</page-link>
    <page-link path="/todos" title="Todos">Todos</page-link>
    <page-link path="/contact" title="Contact">Contact</page-link>
</nav>

<page-route path="/">
    <h1>Welcome</h1>
</page-route>

<!-- lazy-load HTML, txt or JS files -->
<page-route path="/todos" src="./pages/todos.html"></page-route>
<page-route path="/contact" src="./pages/contact.js"></page-route>

<!-- redirect unknown paths -->
<page-redirect path="/404"></page-redirect>

// THE ECOSYSTEM

基于 Web Component 和 Markup 构建。

Router 构建于 Web Component 和 Markup 之上。相同的发动机、模块化套件、零锁定。

Markup

@beforesemicolon/markup

9Kb 反应式模板系统为一切提供动力。标记模板、状态、效果、重复、悬念。

阅读文档

Web Component

@beforesemicolon/web-component

原生自定义元素之上的反应层 — Router 的基础。props、状态、范围样式、生命周期。

阅读文档

// WHY THIS ROUTER

消失在 HTML 中的路由。

五个 Web 组件、一个中央匹配器和一个干净的 JS API，可满足您无法用标记表达的所有内容。

即插即用

放入两个脚本标签并使用 HTML 进行路由。无需构建步骤，无需路由器配置，无需 JavaScript。

微小而专注

较小的表面积：五个 Web 组件和一个 JS API。基于 Markup + Web Component 构建，零额外依赖。

延迟加载页面

将页面路由指向 HTML、txt 或 JS 文件。模块加载一次，在访问之间缓存，干净地安装和卸载。

嵌套和命名路由

孩子们延续了父母的道路。使用 name 属性进行类似开关的互斥匹配。

搜索查询路由

page-route-query 基于 ?key=value 呈现内容 — 选项卡、过滤器和模态，没有一行状态。

智能重定向

页面重定向仅针对未知路径 - 或始终，其范围仅限于其父路由。非常适合 404 和默认值。

一场比赛，一场渲染

中央匹配器解析每个导航一次。卫兵跑一次。订阅者仅在相关时才会触发。

缓存重新安装

非活动路由与 DOM 分离，但保持温暖。回来是立即重新安装，而不是重建。

与任何建筑商合作

Vite、Webpack、esbuild、普通 HTML 或 CDN 脚本标签 - 它只是 Web 组件，因此它可以插入任何地方。

// SEE IT IN ACTION

五个例子。无限的站点地图。

编写页面路由、页面链接、页面路由查询、页面重定向、页面数据以及围绕它们的小型 JS API。

示例 01

嵌套路由和参数

html
<!-- nested routes — child paths extend the parent -->
<page-route path="/projects" exact="false">
    <h1>Projects</h1>

    <!-- /projects -->
    <page-route src="./pages/projects-list.js"></page-route>

    <!-- /projects/:projectId — pathname params -->
    <page-route path="/:projectId" src="./pages/project.js">
        <div slot="loading">Loading project...</div>
        <div slot="fallback">Could not load this project.</div>
    </page-route>

    <!-- only redirects unknown CHILD routes of /projects -->
    <page-redirect path="/projects/not-found"></page-redirect>
</page-route>

示例 02

搜索查询路线

html
<!-- routing by ?tab= — perfect for tabs, filters, modals -->
<div class="tabs">
    <div class="tab-header">
        <page-link search="tab=one">Tab 1</page-link>
        <page-link search="tab=two">Tab 2</page-link>
    </div>

    <div class="tab-content">
        <page-route-query key="tab" value="one">
            Tab One content
        </page-route-query>

        <page-route-query key="tab" value="two">
            Tab Two content
        </page-route-query>
    </div>
</div>

示例 03

页面元数据

html
<!-- render location metadata: payload, params and search queries -->
<page-link path="/users/42" title="User profile" payload='{"role": "admin"}'
    >Open user 42</page-link
>

<page-route path="/users/:userId">
    <h1>User <page-data param="userId">unknown</page-data></h1>

    <!-- payload data passed via the link -->
    <p>Role: <page-data key="role">guest</page-data></p>

    <!-- current search query value (following router API search-param attribute) -->
    <p>Tab: <page-data search-param="tab">overview</page-data></p>
</page-route>

示例 04

受保护的路线

javascript
import {
    registerGlobalGuard,
    registerRouteGuard,
} from '@beforesemicolon/router'

registerGlobalGuard((pathname) => {
    const publicPages = ['/', '/login', '/pricing', '/404']

    if (!publicPages.includes(pathname) && !auth.isSignedIn()) {
        return '/login'
    }

    return true
})

registerRouteGuard('/admin/:section', async () => {
    return (await auth.hasRole('admin')) || '/unauthorized'
})

示例 05

捆绑器友好的页面

javascript
import { registerRouteModules } from '@beforesemicolon/router'

registerRouteModules(
    import.meta.glob('./pages/**/*.{js,html,txt}', {
        eager: false,
    })
)

html
<page-route path="/" src="./pages/home.js"></page-route>
<page-route path="/docs" src="./pages/docs.html"></page-route>
<page-route path="/legal" src="./pages/legal.txt"></page-route>

// quick start

只需几秒钟即可安装。

选择您喜欢的安装方法。适用于 JavaScript 运行的任何地方。

<script src="https://unpkg.com/@beforesemicolon/router/dist/client.js"></script>

npm install @beforesemicolon/router

yarn add @beforesemicolon/router

pnpm add @beforesemicolon/router

构建单页和多页应用程序，你的方式。

将普通 Web 标准的简单性与声明式路由的强大功能相结合。

开始使用阅读文档

简单的 HTML路由。