<page-redirect>
El componente <page-redirect> desencadena la redirección programática. Se utiliza para manejar URL desconocidas (errores 404) o para enrutar rutas de índice principal a una subruta predeterminada.
<page-redirect path="/dashboard" type="always"></page-redirect>Atributos
| Atributo | Tipo | Predeterminado | Descripción |
|---|---|---|---|
type | "unknown" | "always" | "unknown" | Condición bajo la cual se activa la redirección. |
path | string | "/" | Ruta de destino (admite prefijos principales como $ y ~). |
title | string | undefined | El título del documento que se establecerá después de la redirección. |
payload | object | {} | Carga útil del estado histórico. En HTML, proporcione una cadena de objeto serializada JSON. |
Tipos de redireccionamiento
1. unknown (predeterminado)
La redirección se activa solo cuando la ruta actual del navegador no coincide con ninguna ruta registrada. Esto se utiliza principalmente para definir alternativas 404 globales o locales:
<!-- 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] El orden de las etiquetas en HTML es importante. Asegúrese de definir los elementos
<page-redirect>después de sus etiquetas<page-route>para que todas las rutas válidas se registren primero.
2. always
La redirección se activa inmediatamente cuando la ruta principal coincide exactamente. Esto es útil para asignar una vista o pestaña predeterminada al visitar un diseño principal:
<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>Redirección con alcance
Porque <page-redirect> conoce su ubicación en el árbol DOM:
- Colocarlo dentro de un
<page-route>principal significa que solo manejará redirecciones para rutas secundarias dentro de esa ruta. - Las rutas de nivel raíz no relacionadas no activarán la redirección secundaria.
<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>