开始使用
设置路由不需要路由配置文件、包装框架或构建工具。小型应用程序可以使用 HTML 标签进行完全路由，较大的应用程序可以将每个视图移动到惰性 HTML 或 JavaScript 路由文件中。
让我们逐步构建一个简单的多选项卡仪表板：
第 1 步：添加脚本
导入所需的脚本。 Router 依赖 @beforesemicolon/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>第 2 步：声明导航链接
使用 <page-link> 标签创建导航链接。使用 path 属性指向特定 URL，并使用 title 指定文档标题：
html
<nav>
<page-link path="/" title="Home Dashboard">Home</page-link>
<page-link path="/todos" title="Todo Manager">Todos</page-link>
<page-link path="/contact" title="Get in Touch">Contact</page-link>
</nav>第 3 步：定义页面路由
将您的页面视图包含在 <page-route> 标记内。仅当浏览器路径名与其 path 属性匹配时，这些元素的内容才会呈现：
html
<!-- Home Page -->
<page-route path="/">
<h1>Welcome Home</h1>
<p>This is the default dashboard view.</p>
</page-route>
<!-- Todo Page (exact path matching) -->
<page-route path="/todos">
<h1>Your Todos</h1>
<p>Manage your daily activities here.</p>
</page-route>
<!-- Contact Page -->
<page-route path="/contact">
<h1>Contact Us</h1>
<p>Send us an email at contact@example.com</p>
</page-route>第 4 步：处理 404 和重定向
要在用户导航到未注册或无效 URL 时重定向用户，请在路由列表底部定义 404 路由和 <page-redirect>：
html
<!-- 404 Fallback page -->
<page-route path="/404">
<h1>404 - Page Not Found</h1>
</page-route>
<!-- Redirects any unknown paths to the 404 page -->
<page-redirect path="/404"></page-redirect>下一步
现在您已经有了基本的路由布局，您可以探索：
- 指南和最佳实践 用于路由结构、重定向、防护和生产约定。
- 页面路由 用于渲染参数、嵌套视图、加载状态和延迟路由文件。
- 导航 API 在 JavaScript 内以编程方式导航。
- Route Guards 通过同步或异步检查来保护页面。