Composant d'itinéraire de page - Router par Before Semicolon

`<page-route>`

Le composant <page-route> est le conteneur de route principal. Il monte le contenu à emplacements, un fichier src paresseux ou un composant fourni par JavaScript uniquement lorsque le nom de chemin actuel correspond à son modèle de route.

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

Attributs

Attribut	Tapez	Par défaut	Descriptif
`path`	`string`	`"/"`	Le modèle de nom de chemin à correspondre (prend en charge des paramètres tels que `/:id`).
`exact`	`boolean`	`true`	Lorsque `true`, correspond strictement au chemin. Lorsque `false`, correspond aux chemins commençant par le modèle.
`src`	`string`	`undefined`	Chemin d'accès relatif à un fichier de module HTML, texte ou JavaScript à chargement différé.
`title`	`string`	`undefined`	Met à jour le titre du document lorsque cette route devient active.
`name`	`string`	`undefined`	Identificateur de groupe de routes mutuellement exclusif (similaire à une instruction Switch).

Paramètres dynamiques

Utilisez deux points : pour définir les paramètres de chemin. Vous pouvez récupérer ces valeurs dans HTML imbriqué via <page-data> ou dans JavaScript :

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

Mises en page imbriquées

Définissez exact="false" sur une route parent qui doit rester active pendant que les routes enfants correspondent. Les valeurs enfants path sont ajoutées au chemin de route parent le plus proche.

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>

Regroupement de type commutateur (`name`)

Pour garantir qu'un seul itinéraire dans un groupe soit rendu à la fois (en évitant les correspondances qui se chevauchent), attribuez-leur le même attribut name. Le routeur les évaluera dans l'ordre et montera uniquement la première correspondance :

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>

Chargement différé (`src`)

Au lieu d'incorporer toutes les vues dans le document principal, chargez-les à la demande en spécifiant un fichier dans l'attribut src.

Vous pouvez définir un état de chargement et une interface utilisateur de secours (affichée si la requête échoue) à l'aide des emplacements loading et 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>

Formats à chargement différé pris en charge

Lors du chargement d'un fichier JavaScript, le module doit exporter par défaut l'un des éléments suivants :

Une simple chaîne HTML/texte.
Un DOM natif Node (par exemple Element, DocumentFragment).
Un HtmlTemplate généré par le littéral balisé Markup html.
Une fonction qui reçoit (locationState, pathParams, searchParams) et renvoie l'un des éléments ci-dessus.

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

Mise en cache et cycle de vie

Pour éviter les fuites de mémoire et optimiser les performances :

Les routes inactives reçoivent l'attribut hidden.
Lorsqu'une route chargée devient inactive, le moteur détache l'arborescence DOM et la met en cache en mémoire.
Si l'itinéraire correspond à nouveau, l'arborescence DOM mise en cache est réinsérée sans répéter les calculs ou les requêtes.

modifier ce document