Componente de consulta de ruta de página: Router por Before Semicolon

`<page-route-query>`

El componente <page-route-query> monta contenido de forma condicional según los valores de los parámetros de consulta de búsqueda de URL (?key=value) en lugar del nombre de ruta de la URL.

Este componente es ideal para crear navegación con pestañas, filtros o modales modulares sin escribir la lógica de estado 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	Predeterminado	Descripción
`key`	`string`	`undefined`	El nombre del parámetro de búsqueda a observar (por ejemplo, `"tab"`).
`value`	`string`	`undefined`	El valor exacto del parámetro que desencadena una coincidencia.
`src`	`string`	`undefined`	Ruta relativa a un archivo externo (HTML, JS, TXT) para cargar bajo demanda.
`name`	`string`	`undefined`	Identificador de grupo de ruta de consulta mutuamente excluyente.

Ejemplo: diseño con pestañas

Combine <page-route-query> con <page-link> para crear pestañas totalmente declarativas y con reconocimiento de estado activo:

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>

Comportamiento y almacenamiento en caché

Al igual que <page-route>, el comparador de consultas separa las vistas de plantilla cuando el parámetro no coincide y las almacena en caché.
Cuando la consulta vuelve a coincidir, la plantilla almacenada en caché se restaura instantáneamente.
Las ranuras del cargador (loading) y los respaldos (fallback) son totalmente compatibles cuando se utiliza el atributo src.

editar este documento