<page-redirect>

<page-redirect> 组件触发编程重定向。它用于处理未知 URL(404 错误)或将父索引路径路由到默认子路由。

html
<page-redirect path="/dashboard" type="always"></page-redirect>

属性

属性类型默认描述
type"unknown" | "always""unknown"触发重定向的条件。
pathstring"/"目标路径(支持 $~ 等父前缀)。
titlestringundefined重定向后要设置的文档标题。
payloadobject{}历史状态有效负载。在 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 树中的位置:

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>
编辑此文档