页面路由组件 - Router by Before Semicolon

`<page-route>`

<page-route> 组件是主路由容器。仅当当前路径名与其路由模式匹配时，它才会安装开槽内容、惰性 src 文件或 JavaScript 提供的组件。

html
<page-route path="/dashboard">
    <h2>Dashboard View</h2>
</page-route>

属性

属性	类型	默认	描述
`path`	`string`	`"/"`	要匹配的路径名模式（支持 `/:id` 等参数）。
`exact`	`boolean`	`true`	当`true`时，严格匹配路径。当 `false` 时，匹配以该模式开头的路径。
`src`	`string`	`undefined`	要延迟加载的 HTML、文本或 JavaScript 模块文件的相对路径。
`title`	`string`	`undefined`	当此路径变为活动状态时更新文档标题。
`name`	`string`	`undefined`	互斥的路由组标识符（类似于 Switch 语句）。

动态参数

使用冒号 : 定义路径参数。您可以通过 <page-data> 或 JavaScript 在嵌套的 HTML 中检索这些值：

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

嵌套布局

在父路由上设置 exact="false"，该父路由在子路由匹配时应保持活动状态。子 path 值将附加到最近的父路由路径。

html
<page-route path="/teams/:teamId" exact="false">
    <h1>Team <page-data param="teamId">unknown</page-data></h1>

    <nav>
        <page-link path="$/members">Members</page-link>
        <page-link path="$/settings">Settings</page-link>
    </nav>

    <page-route path="/members" src="./teams/members.html"></page-route>
    <page-route path="/settings" src="./teams/settings.js"></page-route>
</page-route>

类似开关的分组 (`name`)

为了确保一次仅渲染组中的一个路由（防止重叠匹配），请为它们分配相同的 name 属性。路由器将按顺序评估它们并仅安装_first_匹配：

html
<!-- Mutually exclusive routing -->
<page-route name="view-group" path="/users/new">
    <h2>Create New User</h2>
</page-route>

<page-route name="view-group" path="/users/:userId">
    <h2>User Profile</h2>
</page-route>

延迟加载 (`src`)

不要将所有视图嵌入主文档中，而是通过在 src 属性中指定文件来按需加载它们。

您可以使用 loading 和 fallback 槽定义加载状态和后备 UI（如果请求失败则显示）：

html
<page-route path="/about" src="./pages/about-page.html">
    <div slot="loading">Loading page template...</div>
    <div slot="fallback">Oops! Failed to load page.</div>
</page-route>

支持的延迟加载格式

加载 JavaScript 文件时，模块必须默认导出以下内容之一：

纯 HTML/文本字符串。
本机 DOM Node（例如 Element、DocumentFragment）。
由 Markup html 标记文字生成的 HtmlTemplate。
接收 (locationState, pathParams, searchParams) 并返回上述任何内容的函数。

javascript
// ./pages/user-details.js
const { html } = BFS.MARKUP

export default (data, params, query) => html`
    <h2>User Profile: ${params.userId}</h2>
    <p>Role: ${data.role}</p>
    <p>Tab: ${query.tab || 'overview'}</p>
`

缓存和生命周期

为了防止内存泄漏并优化性能：

非活动路由接收 hidden 属性。
当加载的路由变为非活动状态时，引擎会分离 DOM 树并将其缓存在内存中。
如果路由再次匹配，则重新插入缓存的DOM树，而无需重复计算或请求。

编辑此文档