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

`<page-link>`

El componente <page-link> representa un contenedor de etiquetas de anclaje HTML estándar (<a>) que intercepta eventos de clic, actualiza el historial del navegador y se resalta con un atributo active cuando coincide con la ubicación actual.

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

Atributos

Atributo	Tipo	Predeterminado	Descripción
`path`	`string`	Ruta actual	El nombre de la ruta de destino (por ejemplo, `/home` o parámetros relativos a la consulta).
`search`	`string`	`undefined`	Agrega o actualiza los parámetros de búsqueda (por ejemplo, `tab=settings`).
`keep-current-search`	`boolean`	`false`	Conserva los parámetros de búsqueda de URL existentes al navegar a una nueva ruta.
`exact`	`boolean`	`true`	Cuando `true`, los enlaces se marcan como activos solo en una coincidencia exacta de nombre de ruta.
`title`	`string`	`undefined`	El título del documento que se establecerá tras una navegación exitosa.
`payload`	`object`	`{}`	Carga útil del estado histórico. En HTML, proporcione una cadena de objeto serializada JSON.

Resolución de ruta relativa

Para que las estructuras de diseño de página sean reutilizables, <page-link> resuelve automáticamente los prefijos abreviados:

Sin atributo path: Evalúa el nombre de ruta actual del navegador. Ideal cuando solo necesitas modificar parámetros de consulta.
html
```
<page-link search="filter=completed">Completed Tasks</page-link>
```

Prefijo de dólar $: Reemplazado por la ruta del elemento <page-route> principal más cercano en el árbol DOM.

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

Prefijo de tilde ~: Reemplazado por el nombre de ruta actual del navegador. Útil para agregar secciones secundarias.

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

Estilo de estado activo

Cuando la ubicación del navegador coincide con el destino del enlace, el componente obtiene un atributo active nativo:

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

Puede apuntar a este estado en CSS usando atributos estándar o partes ocultas de 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);
}

Pasar cargas útiles

Utilice payload para pasar datos del estado del historial a la página siguiente.

En HTML simple, los atributos son cadenas, por lo que payload debe ser un objeto serializado JSON válido:

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

Al renderizar <page-link> a Markup, pase el valor como una propiedad de objeto:

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 carga útil está disponible en la ruta de destino a través de getPageData(), onPage(), onPageChange() o <page-data key="...">.

editar este documento