<page-redirect>
Le composant <page-redirect> déclenche la redirection programmatique. Il est utilisé pour gérer les URL inconnues (erreurs 404) ou pour acheminer les chemins d'index parents vers une sous-route par défaut.
<page-redirect path="/dashboard" type="always"></page-redirect>Attributs
| Attribut | Tapez | Par défaut | Descriptif |
|---|---|---|---|
type | "unknown" | "always" | "unknown" | Condition dans laquelle la redirection se déclenche. |
path | string | "/" | Chemin de destination (prend en charge les préfixes parents tels que $ et ~). |
title | string | undefined | Le titre du document à définir après la redirection. |
payload | object | {} | Charge utile de l’état de l’historique. Dans HTML, fournissez une chaîne d'objet sérialisée JSON. |
Types de redirection
1. unknown (par défaut)
La redirection se déclenche uniquement lorsque le chemin actuel du navigateur ne correspond à aucun itinéraire enregistré. Ceci est principalement utilisé pour définir des solutions de secours 404 globales ou 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] L'ordre des balises dans HTML est important. Assurez-vous de définir les éléments
<page-redirect>après vos balises<page-route>afin que toutes les routes valides soient enregistrées en premier.
2. always
La redirection se déclenche immédiatement lorsque la route parent correspond exactement. Ceci est utile pour attribuer une vue ou un onglet par défaut lors de la visite d'une mise en page parent :
<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>Redirection étendue
Parce que <page-redirect> connaît son emplacement dans l'arborescence DOM :
- Le placer dans un parent
<page-route>signifie qu'il ne gérera que les redirections pour les chemins enfants au sein de cette route. - Les chemins d'accès au niveau racine non liés ne déclencheront pas la redirection enfant.
<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>