Componente Page Link - Router da Before Semicolon

`<page-link>`

O componente <page-link> renderiza um contêiner para uma âncora HTML padrão (<a>) que intercepta cliques, atualiza o histórico do navegador e recebe o atributo active quando corresponde à localização atual.

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

Atributos

Atributo	Tipo	Padrão	Descrição
`path`	`string`	Caminho atual	Caminho de destino (por exemplo, `/home` ou parâmetros relativos de consulta).
`search`	`string`	`undefined`	Adiciona ou atualiza parâmetros de consulta (por exemplo, `tab=settings`).
`keep-current-search`	`boolean`	`false`	Mantém os parâmetros de consulta existentes ao navegar para um novo caminho.
`exact`	`boolean`	`true`	Quando `true`, o link só fica ativo em uma correspondência exata do caminho.
`title`	`string`	`undefined`	Título do documento definido após uma navegação bem-sucedida.
`payload`	`object`	`{}`	Estado do histórico. No HTML, forneça uma string de objeto serializada como JSON.

Resolução de caminhos relativos

Para tornar estruturas de layout reutilizáveis, <page-link> resolve automaticamente estes prefixos abreviados:

Sem o atributo path: Usa o caminho atual do navegador. Ideal quando você só precisa alterar parâmetros de consulta.
html
```
<page-link search="filter=completed">Completed Tasks</page-link>
```

Prefixo cifrão $: É substituído pelo caminho do elemento <page-route> pai mais próximo na árvore DOM.

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

Prefixo til ~: É substituído pelo caminho atual do navegador. Útil para adicionar seções filhas.

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

Estilização do estado ativo

Quando a localização do navegador corresponde ao destino do link, o componente recebe um atributo nativo active:

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

Você pode selecionar esse estado no CSS usando atributos padrão ou partes do Shadow DOM:

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);
}

Passando estados

Use payload para passar dados no estado do histórico para a próxima página.

Em HTML simples, atributos são strings, portanto payload deve ser um objeto serializado em JSON válido:

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

Ao renderizar <page-link> com Markup, passe o valor como propriedade 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> `

O estado fica disponível na rota de destino por meio de getPageData(), onPage(), onPageChange() ou <page-data key="...">.

editar este documento