Componente Page Route - Router da Before Semicolon

`<page-route>`

O componente <page-route> é o principal contêiner de rotas. Ele monta conteúdo inserido, um arquivo src sob demanda ou um componente fornecido por JavaScript somente quando o caminho atual corresponde ao padrão da rota.

html
<page-route path="/dashboard">
    <h2>Dashboard View</h2>
</page-route>

Atributos

Atributo	Tipo	Padrão	Descrição
`path`	`string`	`"/"`	Padrão do caminho a corresponder (aceita parâmetros como `/:id`).
`exact`	`boolean`	`true`	Quando `true`, exige correspondência estrita. Quando `false`, aceita caminhos iniciados no padrão.
`src`	`string`	`undefined`	Caminho relativo de um arquivo HTML, texto ou módulo JavaScript a carregar sob demanda.
`title`	`string`	`undefined`	Atualiza o título do documento quando a rota fica ativa.
`name`	`string`	`undefined`	Identificador de grupo de rotas mutuamente exclusivas (semelhante a uma instrução Switch).

Parâmetros dinâmicos

Use dois-pontos : para definir parâmetros de caminho. Você pode obter esses valores em HTML aninhado por meio de <page-data> ou no JavaScript:

html
<page-route path="/users/:userId">
    <h2>User ID: <page-data param="userId"></page-data></h2>
</page-route>

Layouts aninhados

Defina exact="false" em uma rota pai que deve permanecer ativa enquanto as rotas filhas correspondem. Os valores de path das rotas filhas são acrescentados ao caminho da rota pai mais próxima.

html
<page-route path="/teams/:teamId" exact="false">
    <h1>Team <page-data param="teamId">unknown</page-data></h1>

    <nav>
        <page-link path="$/members">Members</page-link>
        <page-link path="$/settings">Settings</page-link>
    </nav>

    <page-route path="/members" src="./teams/members.html"></page-route>
    <page-route path="/settings" src="./teams/settings.js"></page-route>
</page-route>

Agrupamento semelhante a Switch (`name`)

Para garantir que apenas uma rota do grupo seja renderizada por vez, evitando correspondências sobrepostas, atribua a elas o mesmo atributo name. O roteador avalia as rotas em ordem e monta apenas a primeira correspondência:

html
<!-- Mutually exclusive routing -->
<page-route name="view-group" path="/users/new">
    <h2>Create New User</h2>
</page-route>

<page-route name="view-group" path="/users/:userId">
    <h2>User Profile</h2>
</page-route>

Carregamento sob demanda (`src`)

Em vez de incorporar todas as visualizações no documento principal, carregue-as sob demanda informando um arquivo no atributo src.

Você pode definir um estado de carregamento e uma interface alternativa, exibida caso a requisição falhe, usando os slots loading e fallback:

html
<page-route path="/about" src="./pages/about-page.html">
    <div slot="loading">Loading page template...</div>
    <div slot="fallback">Oops! Failed to load page.</div>
</page-route>

Formatos aceitos no carregamento sob demanda

Ao carregar um arquivo JavaScript, o módulo deve exportar como padrão um dos itens abaixo:

Uma string simples de HTML/texto.
Um Node nativo do DOM (por exemplo, Element, DocumentFragment).
Um HtmlTemplate gerado pelo literal marcado html do Markup.
Uma função que recebe (locationState, pathParams, searchParams) e retorna qualquer um dos itens acima.

javascript
// ./pages/user-details.js
const { html } = BFS.MARKUP

export default (data, params, query) => html`
    <h2>User Profile: ${params.userId}</h2>
    <p>Role: ${data.role}</p>
    <p>Tab: ${query.tab || 'overview'}</p>
`

Cache e ciclo de vida

Para evitar vazamentos de memória e otimizar o desempenho:

Rotas inativas recebem o atributo hidden.
Quando uma rota carregada fica inativa, o mecanismo desanexa a árvore DOM e a armazena em memória.
Se a rota voltar a corresponder, a árvore DOM em cache é reinserida sem repetir cálculos ou requisições.

editar este documento