Componente Page Route Query - Router da Before Semicolon

`<page-route-query>`

O componente <page-route-query> monta conteúdo condicionalmente com base nos valores dos parâmetros de consulta da URL (?key=value), em vez do caminho da URL.

Esse componente é ideal para criar navegação por abas, filtros ou modais modulares sem escrever lógica de estado em JavaScript.

html
<page-route-query key="modal" value="open">
    <div class="modal-dialog">
        <h3>System Settings</h3>
        <p>Modify application values here...</p>
    </div>
</page-route-query>

Atributos

Atributo	Tipo	Padrão	Descrição
`key`	`string`	`undefined`	Nome do parâmetro de consulta a observar (por exemplo, `"tab"`).
`value`	`string`	`undefined`	Valor exato do parâmetro que aciona uma correspondência.
`src`	`string`	`undefined`	Caminho relativo de um arquivo externo (HTML, JS, TXT) a carregar sob demanda.
`name`	`string`	`undefined`	Identificador de um grupo mutuamente exclusivo de rotas de consulta.

Exemplo: layout com abas

Combine <page-route-query> com <page-link> para criar abas totalmente declarativas e cientes do estado ativo:

html
<div class="tabs-container">
    <!-- 1. Tabs navigation -->
    <div class="tab-headers">
        <page-link search="tab=profile">Profile Settings</page-link>
        <page-link search="tab=security">Security Panel</page-link>
    </div>

    <!-- 2. Conditionally rendered views -->
    <div class="tab-contents">
        <page-route-query key="tab" value="profile" name="settings-tab">
            <h3>Profile Settings</h3>
            <p>Update your display name and email address...</p>
        </page-route-query>

        <page-route-query
            key="tab"
            value="security"
            name="settings-tab"
            src="./tabs/security.html"
        >
            <div slot="loading">Loading security module...</div>
        </page-route-query>
    </div>
</div>

Comportamento e cache

Assim como <page-route>, o comparador de consulta desanexa as visualizações de modelo quando o parâmetro não corresponde e as armazena em cache.
Quando a consulta volta a corresponder, o modelo em cache é restaurado instantaneamente.
Slots de carregamento (loading) e conteúdo alternativo (fallback) têm suporte completo ao usar o atributo src.

editar este documento