<page-data>
<page-data> 组件允许您直接在 HTML 中打印当前路由参数、搜索查询或历史状态,而无需编写 JavaScript 选择器。
html
<p>Viewing user ID: <page-data param="userId">unknown</page-data></p>属性
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
param | string | undefined | 要渲染的路径参数的名称(例如 /users/:userId 中的 userId)。 |
search-param | string | undefined | 要呈现的 URL 查询参数的名称(例如 ?filter=active 中的 filter)。 |
key | string | undefined | 从历史状态有效负载显示的点符号键路径。 |
后备值
<page-data> 标记之间包含的任何内容都被视为默认后备值。仅当请求的属性为 undefined 或不可用时才会呈现:
html
<!-- Renders: "Guest" if role is empty -->
<p>Role: <page-data key="role">Guest</page-data></p>深键分辨率
通过 <page-link> 传递复杂历史负载时,请在 key 属性中使用点表示法来遍历嵌套对象:
html
<!-- Navigation link -->
<page-link path="/dashboard" payload='{"user": {"profile": {"name": "Elson"}}}'>
Dashboard
</page-link>
<!-- Extraction -->
<h3>Welcome, <page-data key="user.profile.name">Guest</page-data></h3>