指南和最佳实践
当 URL 被视为导航、过滤器、选项卡和可共享 UI 状态的真实来源时，Router 效果最佳。保持路由声明接近它们控制的布局，然后仅将 JavaScript API 用于无法在 HTML 中清晰表达的行为。
从声明式路由开始
对于大多数页面，直接在文档中使用 <page-route>、<page-link> 和 <page-redirect>。这使得应用程序可以仅从 HTML 结构来理解。
html
<nav>
<page-link path="/" title="Home">Home</page-link>
<page-link path="/projects" title="Projects">Projects</page-link>
<page-link path="/settings" title="Settings">Settings</page-link>
</nav>
<main>
<page-route path="/" src="./pages/home.html"></page-route>
<page-route
path="/projects"
exact="false"
src="./pages/projects.js"
></page-route>
<page-route path="/settings" src="./pages/settings.html"></page-route>
<page-route path="/404">Page not found.</page-route>
<page-redirect path="/404"></page-redirect>
</main>使用嵌套路由进行布局
父路线对于共享导航、标题或路线数据的部分非常有用。子路径延伸最近的父路径。
html
<page-route path="/projects/:projectId" exact="false">
<header>
<h1>Project <page-data param="projectId">unknown</page-data></h1>
<page-link path="$/overview">Overview</page-link>
<page-link path="$/activity">Activity</page-link>
<page-link path="$/settings">Settings</page-link>
</header>
<page-route path="/overview" src="./projects/overview.js"></page-route>
<page-route path="/activity" src="./projects/activity.html"></page-route>
<page-route path="/settings" src="./projects/settings.js"></page-route>
<page-redirect path="$/overview" type="always"></page-redirect>
</page-route>使用查询路由获取 UI 状态
当视图仍然是同一页面但查询值应选择选项卡、抽屉、筛选器或模式时，请使用 <page-route-query>。
html
<page-link search="panel=details" keep-current-search>Details</page-link>
<page-link search="panel=activity" keep-current-search>Activity</page-link>
<page-route-query key="panel" value="details">
<h2>Details</h2>
</page-route-query>
<page-route-query key="panel" value="activity" src="./panels/activity.html">
<p slot="loading">Loading activity...</p>
</page-route-query>对于类型化应用程序，首选 component
如果您从 Markup 或 Web Component 代码渲染路由，则 component 属性可避免基于字符串的动态导入，并为捆绑程序提供直接引用。
javascript
import { html } from '@beforesemicolon/web-component'
import HomePage from './pages/HomePage.js'
import ProjectPage from './pages/ProjectPage.js'
export const routes = html`
<page-route path="/" component="${HomePage}"></page-route>
<page-route
path="/projects/:projectId"
component="${ProjectPage}"
></page-route>
`导航前注册守卫
防护在路由侦听器和路由组件收到通知之前运行。在应用程序启动期间、渲染受保护的路线或触发导航之前注册它们。
javascript
import {
registerGlobalGuard,
registerRouteGuard,
} from '@beforesemicolon/router'
registerGlobalGuard((pathname) => {
if (pathname.startsWith('/account') && !session.currentUser) {
return '/login'
}
return true
})
registerRouteGuard('/admin/:section', async () => {
return (await session.hasRole('admin')) || '/unauthorized'
})将 404 保留在最后
<page-redirect> 检查已注册的路由。将后备重定向放在它们所依赖的有效 <page-route> 声明之后。
html
<page-route path="/">Home</page-route>
<page-route path="/docs" exact="false">Docs</page-route>
<page-route path="/404">Not found</page-route>
<page-redirect path="/404"></page-redirect>尽早选择历史或哈希路由
历史路由提供干净的 URL，并且是默认路由。当您的主机无法将未知路径重写回 index.html 时，哈希路由非常有用。
javascript
import { setRoutingMode } from '@beforesemicolon/router'
setRoutingMode('hash')生产清单
- 通过
<page-link>、<page-route>或您自己的onPageChange处理程序为每个有意义的路由提供一个文档title。 - 使用路由参数来获取资源标识，使用搜索参数来获取可共享的视图状态。
- 保持路由模块较小并延迟加载辅助屏幕。
- 在重叠的路由组上使用
name，以便仅渲染第一个匹配的路由。 - 仅将
payload用于瞬时导航状态。在 URL 或应用程序数据存储中保留重要状态。