Composant de lien de page - Router par Before Semicolon

`<page-link>`

Le composant <page-link> restitue un wrapper de balise d'ancrage HTML standard (<a>) qui intercepte les événements de clic, met à jour l'historique du navigateur et se met en surbrillance avec un attribut active lorsqu'il correspond à l'emplacement actuel.

html
<page-link path="/dashboard" title="Admin Panel">Go to Dashboard</page-link>

Attributs

Attribut	Tapez	Par défaut	Descriptif
`path`	`string`	Chemin actuel	Le chemin d'accès de destination (par exemple `/home` ou paramètres relatifs à la requête).
`search`	`string`	`undefined`	Ajoute ou met à jour les paramètres de recherche (par exemple `tab=settings`).
`keep-current-search`	`boolean`	`false`	Conserve les paramètres de recherche d'URL existants lors de la navigation vers un nouveau chemin.
`exact`	`boolean`	`true`	Lorsque `true`, les liens sont marqués actifs uniquement sur une correspondance exacte du nom de chemin.
`title`	`string`	`undefined`	Le titre du document à définir en cas de navigation réussie.
`payload`	`object`	`{}`	Charge utile de l’état de l’historique. Dans HTML, fournissez une chaîne d'objet sérialisée JSON.

Résolution de chemin relatif

Pour rendre les structures de mise en page réutilisables, <page-link> résout automatiquement les préfixes abrégés :

Aucun attribut path : Évalue le chemin d'accès actuel du navigateur. Idéal lorsque vous avez uniquement besoin de modifier les paramètres de la requête.
html
```
<page-link search="filter=completed">Completed Tasks</page-link>
```

Préfixe dollar $ : Remplacé par le chemin de l'élément <page-route> parent le plus proche dans l'arborescence DOM.

html
<page-route path="/projects/:projectId">
    <!-- Resolves to: /projects/123/edit -->
    <page-link path="$/edit">Edit Project</page-link>
</page-route>

Préfixe Tilde ~ : Remplacé par le chemin d'accès actuel du navigateur. Utile pour ajouter des sections enfants.

html
<!-- If current page is /profile -->
<!-- Resolves to: /profile/settings -->
<page-link path="~/settings">Settings</page-link>

Style d'état actif

Lorsque l'emplacement du navigateur correspond à la cible du lien, le composant obtient un attribut natif active :

html
<!-- Rendered active HTML element -->
<page-link path="/todos" active>Todos</page-link>

Vous pouvez cibler cet état dans CSS à l'aide d'attributs standard ou de parties fantômes CSS :

css
/* Style the outer custom component element */
page-link[active] {
    font-weight: 700;
}

/* Style the inner anchor tag using shadow parts */
page-link::part(anchor) {
    color: var(--foreground);
    text-decoration: none;
    transition: border-color 0.2s;
}

page-link[active]::part(anchor) {
    border-bottom: 2px solid var(--primary);
    color: var(--primary);
}

Passer des charges utiles

Utilisez payload pour transmettre les données d'état de l'historique à la page suivante.

En clair HTML, les attributs sont des chaînes, donc payload doit être un objet sérialisé JSON valide :

html
<page-link path="/dashboard" payload='{"role": "admin", "userId": 42}'>
    Enter Panel
</page-link>

Lors du rendu de <page-link> via Markup, transmettez la valeur en tant que propriété d'objet :

javascript
import { html } from '@beforesemicolon/web-component'

const user = { role: 'admin', userId: 42 }

html` <page-link path="/dashboard" payload="${user}"> Enter Panel </page-link> `

La charge utile est disponible sur l'itinéraire de destination via getPageData(), onPage(), onPageChange() ou <page-data key="...">.

modifier ce document