Componente de ruta de página: Router por Before Semicolon

`<page-route>`

El componente <page-route> es el contenedor de ruta principal. Monta contenido ranurado, un archivo src diferido o un componente proporcionado por JavaScript solo cuando el nombre de ruta actual coincide con su patrón de ruta.

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

Atributos

Atributo	Tipo	Predeterminado	Descripción
`path`	`string`	`"/"`	El patrón de nombre de ruta que debe coincidir (admite parámetros como `/:id`).
`exact`	`boolean`	`true`	Cuando `true`, coincide estrictamente con la ruta. Cuando `false`, coincide con rutas que comienzan con el patrón.
`src`	`string`	`undefined`	Ruta relativa a un archivo de módulo HTML, texto o JavaScript para carga diferida.
`title`	`string`	`undefined`	Actualiza el título del documento cuando esta ruta se activa.
`name`	`string`	`undefined`	Identificador de grupo de rutas mutuamente excluyente (similar a una declaración Switch).

Parámetros dinámicos

Utilice dos puntos : para definir los parámetros de ruta. Puede recuperar estos valores en HTML anidado a través de <page-data> o en JavaScript:

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

Diseños anidados

Configure exact="false" en una ruta principal que debería permanecer activa mientras las rutas secundarias coincidan. Los valores secundarios path se agregan a la ruta principal más cercana.

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>

Agrupación tipo interruptor (`name`)

Para garantizar que solo se represente una ruta en un grupo a la vez (evitando coincidencias superpuestas), asígneles el mismo atributo name. El enrutador los evaluará en orden y montará solo la primera coincidencia:

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>

Carga diferida (`src`)

En lugar de incrustar todas las vistas en el documento principal, cárguelas según demanda especificando un archivo en el atributo src.

Puede definir un estado de carga y una interfaz de usuario alternativa (que se muestra si la solicitud falla) utilizando las ranuras loading y 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 de carga diferida admitidos

Al cargar un archivo JavaScript, el módulo debe exportar de forma predeterminada uno de los siguientes:

Una cadena de texto/HTML simple.
Un DOM Node nativo (por ejemplo, Element, DocumentFragment).
Un HtmlTemplate generado por el literal etiquetado Markup html.
Una función que recibe (locationState, pathParams, searchParams) y devuelve cualquiera de los anteriores.

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>
`

Almacenamiento en caché y ciclo de vida

Para evitar pérdidas de memoria y optimizar el rendimiento:

Las rutas inactivas reciben el atributo hidden.
Cuando una ruta cargada queda inactiva, el motor desconecta el árbol DOM y lo almacena en caché en la memoria.
Si la ruta vuelve a coincidir, el árbol DOM almacenado en caché se vuelve a insertar sin repetir cálculos ni solicitudes.

editar este documento