Composant de requête d'itinéraire de page - Router par Before Semicolon

`<page-route-query>`

Le composant <page-route-query> monte le contenu de manière conditionnelle en fonction des valeurs des paramètres de requête de recherche d'URL (?key=value) au lieu du nom de chemin d'accès de l'URL.

Ce composant est idéal pour créer une navigation par onglets, des filtres ou des modaux modulaires sans écrire de logique d'état 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>

Attributs

Attribut	Tapez	Par défaut	Descriptif
`key`	`string`	`undefined`	Le nom du paramètre de recherche à surveiller (par exemple `"tab"`).
`value`	`string`	`undefined`	La valeur exacte du paramètre qui déclenche une correspondance.
`src`	`string`	`undefined`	Chemin relatif vers un fichier externe (HTML, JS, TXT) à charger à la demande.
`name`	`string`	`undefined`	Identificateur de groupe de route de requête mutuellement exclusif.

Exemple : disposition à onglets

Combinez <page-route-query> avec <page-link> pour créer des onglets entièrement déclaratifs et sensibles à l'état actif :

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>

Comportement et mise en cache

Tout comme <page-route>, l'outil de correspondance de requêtes détache les vues de modèle lorsque le paramètre ne correspond pas et les met en cache.
Lorsque la requête correspond à nouveau, le modèle mis en cache est restauré instantanément.
Les emplacements de chargeur (loading) et les solutions de secours (fallback) sont entièrement pris en charge lors de l'utilisation de l'attribut src.

modifier ce document