页面链接组件 - Router by Before Semicolon

`<page-link>`

<page-link> 组件呈现标准 HTML 锚点 (<a>) 标记包装器，该包装器拦截单击事件、更新浏览器历史记录，并在匹配当前位置时使用 active 属性突出显示自身。

html
<page-link path="/dashboard" title="Admin Panel">Go to Dashboard</page-link>

属性

属性	类型	默认	描述
`path`	`string`	当前路径	目标路径名（例如 `/home` 或查询相关参数）。
`search`	`string`	`undefined`	附加或更新搜索参数（例如 `tab=settings`）。
`keep-current-search`	`boolean`	`false`	导航到新路径时保留现有 URL 搜索参数。
`exact`	`boolean`	`true`	当 `true` 时，仅在路径名完全匹配时链接才会被标记为活动状态。
`title`	`string`	`undefined`	成功导航时设置的文档标题。
`payload`	`object`	`{}`	历史状态有效负载。在 HTML 中，提供 JSON 序列化对象字符串。

相对路径分辨率

为了使页面布局结构可重用，<page-link> 自动解析速记前缀：

无 path 属性： 计算当前浏览器路径名。当您只需要修改查询参数时是理想的选择。
html
```
<page-link search="filter=completed">Completed Tasks</page-link>
```

美元前缀 $： 替换为 DOM 树中最近的父 <page-route> 元素的路径。

html
<page-route path="/projects/:projectId">
    <!-- Resolves to: /projects/123/edit -->
    <page-link path="$/edit">Edit Project</page-link>
</page-route>

波形符前缀 ~： 替换为当前浏览器路径名。对于附加子部分很有用。

html
<!-- If current page is /profile -->
<!-- Resolves to: /profile/settings -->
<page-link path="~/settings">Settings</page-link>

活动状态样式

当浏览器位置与链接的目标匹配时，组件将获得本机 active 属性：

html
<!-- Rendered active HTML element -->
<page-link path="/todos" active>Todos</page-link>

您可以使用标准属性或 CSS 影子部分在 CSS 中定位此状态：

css
/* Style the outer custom component element */
page-link[active] {
    font-weight: 700;
}

/* Style the inner anchor tag using shadow parts */
page-link::part(anchor) {
    color: var(--foreground);
    text-decoration: none;
    transition: border-color 0.2s;
}

page-link[active]::part(anchor) {
    border-bottom: 2px solid var(--primary);
    color: var(--primary);
}

传递有效负载

使用 payload 将历史状态数据传递到下一页。

在普通 HTML 中，属性是字符串，因此 payload 必须是有效的 JSON 序列化对象：

html
<page-link path="/dashboard" payload='{"role": "admin", "userId": 42}'>
    Enter Panel
</page-link>

通过 Markup 渲染 <page-link> 时，将该值作为对象属性传递：

javascript
import { html } from '@beforesemicolon/web-component'

const user = { role: 'admin', userId: 42 }

html` <page-link path="/dashboard" payload="${user}"> Enter Panel </page-link> `

有效负载可通过 getPageData()、onPage()、onPageChange() 或 <page-data key="..."> 在目标路由上获得。

编辑此文档