页面路由查询组件 - Router by Before Semicolon

`<page-route-query>`

<page-route-query> 组件根据 URL 搜索查询参数值 (?key=value) 而不是 URL 路径名有条件地装载内容。

该组件非常适合创建选项卡式导航、过滤器或模块化模式，而无需编写 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>

属性

属性	类型	默认	描述
`key`	`string`	`undefined`	要监视的搜索参数名称（例如 `"tab"`）。
`value`	`string`	`undefined`	触发匹配的确切参数值。
`src`	`string`	`undefined`	要按需加载的外部文件（HTML、JS、TXT）的相对路径。
`name`	`string`	`undefined`	互斥的查询路由组标识符。

示例：选项卡式布局

将 <page-route-query> 与 <page-link> 结合起来创建完全声明性的、活动状态感知的选项卡：

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>

行为和缓存

就像 <page-route> 一样，查询匹配器在参数不匹配时分离模板视图并缓存它们。
当查询再次匹配时，缓存的模板会立即恢复。
使用 src 属性时，完全支持加载程序插槽 (loading) 和回退 (fallback)。

编辑此文档