Before Semicolon 人工智能指南 Router

人工智能指南

为 @beforesemicolon/router 生成示例、教程、迁移或应用程序代码时，请使用此页面作为紧凑参考。

套餐用途

@beforesemicolon/router 是使用 Web Components 构建的 HTML 优先路由库。它提供用于导航和路线渲染的自定义元素，以及用于编程导航、订阅、防护、路线模块、元数据、查询更新和哈希路由的小型 JavaScript API。

所需进口

对于捆绑应用程序：

import '@beforesemicolon/router'

使用导出的 API 时：

javascript
import {
    goToPage,
    onPage,
    onPageChange,
    registerGlobalGuard,
    registerRouteGuard,
    registerRouteModules,
    updateSearchQuery,
} from '@beforesemicolon/router'

对于直接浏览器使用，请先加载 Web Component：

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

CDN API 可从 BFS.ROUTER 获取。

自定义元素

准确地使用这些元素：

html
<page-link path="/docs" title="Docs">Docs</page-link>
<page-route path="/docs" src="./pages/docs.html"></page-route>
<page-route-query key="tab" value="api">API tab</page-route-query>
<page-redirect path="/404"></page-redirect>
<page-data param="id">fallback</page-data>

路线模式

使用 :name 作为动态参数：

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

为布局路由设置 exact="false"，该布局路由应对嵌套路径保持活动状态：

html
<page-route path="/docs" exact="false">
    <page-route path="/intro">Intro</page-route>
    <page-route path="/api">API</page-route>
</page-route>

链接规则

使用 path 进行路径导航，使用 search 进行查询更新。更新一个查询键同时保留其他查询键时，请使用 keep-current-search。

html
<page-link path="/projects">Projects</page-link>
<page-link search="view=grid" keep-current-search>Grid</page-link>

在嵌套路由中使用 $ 来引用最近的父路由路径：

html
<page-route path="/projects/:projectId" exact="false">
    <page-link path="$/settings">Settings</page-link>
</page-route>

使用 ~ 引用当前浏览器路径名：

html
<page-link path="~/edit">Edit current page</page-link>

惰性路由内容

src 可以加载 HTML、文本或 JavaScript 模块。 JavaScript 模块必须默认导出字符串、DOM Node、Markup HtmlTemplate 或接收 (data, params, query) 的函数。

javascript
import { html } from '@beforesemicolon/web-component'

export default (data, params, query) => html`
    <h1>Project ${params.projectId}</h1>
    <p>Filter: ${query.filter || 'all'}</p>
    <p>Opened from: ${data.from || 'direct visit'}</p>
`

程序化导航

goToPage 和 replacePage 是异步的，接受对象字面量状态负载。

javascript
await goToPage('/users/42', { from: 'search' }, 'User 42')
await replacePage('/login', { reason: 'expired' }, 'Login')

卫兵

registerGlobalGuard 和 registerRouteGuard 寄存器保护并且不返回清理函数。一名警卫回来：

true 允许导航。
false 阻止导航。
要重定向的路径字符串。
解决这些价值观之一的承诺。

javascript
registerGlobalGuard((pathname) => {
    if (pathname.startsWith('/account') && !auth.isSignedIn()) {
        return '/login'
    }

    return true
})

查询数据

getSearchParams 使用路由器 JSON 解析器解析搜索值。通过 JSON 字符串化使用 updateSearchQuery 往返写入的值。

javascript
updateSearchQuery({ page: 2, tags: ['router', 'web'] })

避免这些错误

请勿使用 React Router 语法，例如 <Route> 或 useNavigate。
不要声称路由防护注册返回取消订阅功能。
不要在 <page-link> 上使用 href；使用 path 和 search。
请勿将 component="..." 用作 HTML 中的字符串。 component 是 JavaScript 渲染路线的属性。
不要将路由状态用于永久数据。首选参数、查询字符串或应用程序存储。

编辑此文档