<page-redirect>
O componente <page-redirect> aciona um redirecionamento programático. Ele é usado para tratar URLs desconhecidas (erros 404) ou encaminhar o caminho inicial de uma rota pai para uma sub-rota padrão.
<page-redirect path="/dashboard" type="always"></page-redirect>Atributos
| Atributo | Tipo | Padrão | Descrição |
|---|---|---|---|
type | "unknown" | "always" | "unknown" | Condição em que o redirecionamento é acionado. |
path | string | "/" | Caminho de destino (aceita prefixos de rota pai como $ e ~). |
title | string | undefined | Título do documento a definir depois do redirecionamento. |
payload | object | {} | Estado do histórico. No HTML, forneça uma string de objeto serializada como JSON. |
Tipos de redirecionamento
1. unknown (padrão)
O redirecionamento só é acionado quando o caminho atual do navegador não corresponde a nenhuma rota registrada. Isso é usado principalmente para definir alternativas 404 globais ou locais:
<!-- 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] A ordem das tags no HTML é importante. Defina os elementos
<page-redirect>depois das tags<page-route>para que todas as rotas válidas sejam registradas primeiro.
2. always
O redirecionamento é acionado imediatamente quando a rota pai corresponde exatamente. Isso é útil para definir uma visualização ou aba padrão ao visitar um layout pai:
<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>Redirecionamento com escopo
Como <page-redirect> reconhece sua posição na árvore DOM:
- Colocá-lo dentro de um
<page-route>pai faz com que trate somente redirecionamentos de caminhos filhos dessa rota. - Caminhos não relacionados no nível raiz não acionam o redirecionamento filho.
<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>