<page-redirect>
<page-redirect> 组件触发编程重定向。它用于处理未知 URL(404 错误)或将父索引路径路由到默认子路由。
html
<page-redirect path="/dashboard" type="always"></page-redirect>属性
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
type | "unknown" | "always" | "unknown" | 触发重定向的条件。 |
path | string | "/" | 目标路径(支持 $ 和 ~ 等父前缀)。 |
title | string | undefined | 重定向后要设置的文档标题。 |
payload | object | {} | 历史状态有效负载。在 HTML 中,提供 JSON 序列化对象字符串。 |
重定向类型
1.unknown(默认)
仅当当前浏览器路径与任何注册的路由都不匹配时才会触发重定向。这主要用于定义全局或本地 404 回退:
html
<!-- Register valid routes first -->
<page-route path="/">Home</page-route>
<page-route path="/about">About</page-route>
<page-route path="/404">Not Found</page-route>
<!-- Redirect any other path to /404 -->
<page-redirect path="/404"></page-redirect>[!IMPORTANT] HTML 中标签的顺序很重要。确保在
<page-route>标签之后定义<page-redirect>元素,以便首先注册所有有效路由。
2. always
当父路由完全匹配时,重定向立即触发。这对于在访问父布局时分配默认视图或选项卡很有帮助:
html
<page-route path="/projects/:projectId" exact="false">
<h2>Project Dashboard</h2>
<div class="sub-tabs">
<page-link path="$/overview">Overview</page-link>
<page-link path="$/analytics">Analytics</page-link>
</div>
<!-- Sub-Routes -->
<page-route path="/overview">Overview Content</page-route>
<page-route path="/analytics">Analytics Content</page-route>
<!-- Redirects /projects/:projectId directly to /projects/:projectId/overview -->
<page-redirect path="$/overview" type="always"></page-redirect>
</page-route>范围重定向
因为 <page-redirect> 知道它在 DOM 树中的位置:
- 将其放置在父
<page-route>中意味着它将仅处理该路由内子路径的重定向。 - 不相关的根级路径不会触发子重定向。
html
<page-route path="/admin" exact="false">
<h2>Admin Dashboard</h2>
<page-route path="/settings">Settings</page-route>
<!-- Redirects /admin/invalid-subpath to /admin/settings -->
<page-redirect path="$/settings"></page-redirect>
</page-route>