<page-data>

<page-data> 组件允许您直接在 HTML 中打印当前路由参数、搜索查询或历史状态,而无需编写 JavaScript 选择器。

html
<p>Viewing user ID: <page-data param="userId">unknown</page-data></p>

属性

属性类型默认描述
paramstringundefined要渲染的路径参数的名称(例如 /users/:userId 中的 userId)。
search-paramstringundefined要呈现的 URL 查询参数的名称(例如 ?filter=active 中的 filter)。
keystringundefined从历史状态有效负载显示的点符号键路径。

后备值

<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>
编辑此文档