页头导航 AsamPageHeader

使用场景

在页面标题旁放置返回操作和补充信息。

基础用法与状态

下列示例只使用本入口的实际公开能力。

基础用法与状态

vue

<template>
	<AsamPageHeader title="返回" content="本地说明" @back="count++">
		<template #extra>
			<span>草稿</span>
		</template>
	</AsamPageHeader>
	<p class="example-paragraph" role="status">返回意图：{{ count }} 次</p>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamPageHeaderBasicDemo' });
import { ref } from 'vue';
import { AsamPageHeader } from '@asam-ui/ui';
const count = ref(0);
</script>

<style scoped>
p:where(.example-paragraph) {
	margin-block: 16px;
	line-height: 1.8;
	overflow-wrap: anywhere;
}
</style>

vue

<template>
	<AsamPageHeader title="返回" content="本地说明" @back="count++">
		<template #extra>
			<span>草稿</span>
		</template>
	</AsamPageHeader>
	<p class="example-paragraph" role="status">返回意图：{{ count }} 次</p>
</template>

<script setup>
defineOptions({ name: 'AsamPageHeaderBasicDemo' });
import { ref } from 'vue';
import { AsamPageHeader } from '@asam-ui/ui';
const count = ref(0);
</script>

<style scoped>
p:where(.example-paragraph) {
	margin-block: 16px;
	line-height: 1.8;
	overflow-wrap: anywhere;
}
</style>

使用约定

title/content/icon 及同名插槽、extra/default 插槽按公开契约组织。back 只通知返回意图，宿主决定路由或历史操作；本例记录本地次数，不修改浏览历史。

完整使用场景

完整示例

下列完整示例包含状态与交互，源码提供 TS 和 JS 两种版本。

完整示例

许可

vue

<template>
	<div aria-label="完整页头示例">
		<AsamPageHeader @back="onBack">
			<template #breadcrumb>
				<AsamBreadcrumb separator="/">
					<AsamBreadcrumbItem :to="{ path: './page-header.html' }">
						首页
					</AsamBreadcrumbItem>
					<AsamBreadcrumbItem>
						<AsamLink href="/component-AsamPageHeader.html">路由一</AsamLink>
					</AsamBreadcrumbItem>
					<AsamBreadcrumbItem>路由二</AsamBreadcrumbItem>
				</AsamBreadcrumb>
			</template>
			<template #content>
				<div class="flex items-center">
					<AsamAvatar
						class="mr-3"
						:size="32"
						src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E"
					/>
					<span class="text-large font-600 mr-3"> 标题 </span>
					<span class="text-sm mr-2" style="color: var(--el-text-color-regular)">
						副标题
					</span>
					<AsamTag>默认</AsamTag>
				</div>
			</template>
			<template #extra>
				<div class="flex items-center">
					<AsamButton type="default">打印</AsamButton>
					<AsamButton type="default" class="ml-2">编辑</AsamButton>
				</div>
			</template>

			<AsamDescriptions :column="3" size="small" class="mt-4">
				<AsamDescriptionsItem label="用户名"> kooriookami </AsamDescriptionsItem>
				<AsamDescriptionsItem label="电话"> 18100000000 </AsamDescriptionsItem>
				<AsamDescriptionsItem label="地点">苏州</AsamDescriptionsItem>
				<AsamDescriptionsItem label="备注">
					<AsamTag size="small">学校</AsamTag>
				</AsamDescriptionsItem>
				<AsamDescriptionsItem label="地址">
					江苏省苏州市吴中区吴中大道 1188 号
				</AsamDescriptionsItem>
			</AsamDescriptions>
			<p class="mt-4 text-sm example-paragraph">
				说明文本示例：通常按周发布；关键问题采用紧急修复，实际发布次数可能调整。
			</p>
		</AsamPageHeader>
	</div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamPageHeaderCapCompleteDemo' });
import {
	AsamLink,
	AsamPageHeader,
	AsamBreadcrumb,
	AsamBreadcrumbItem,
	AsamAvatar,
	AsamTag,
	AsamButton,
	AsamDescriptions,
	AsamDescriptionsItem
} from '@asam-ui/ui';

import { AsamNotification as notify } from '@asam-ui/ui';

const onBack = () => {
	notify('Back');
};
</script>

<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.flex {
	display: flex;
}

.items-center {
	align-items: center;
}

.mr-3 {
	margin-right: 0.75rem;
}

.text-large {
	font-size: var(--el-font-size-large);
}

.font-600 {
	font-weight: 600;
}

.text-sm {
	font-size: var(--el-font-size-small);
}

.mr-2 {
	margin-right: 0.5rem;
}

.ml-2 {
	margin-left: 0.5rem;
}

.mt-4 {
	margin-top: 1rem;
}
</style>

<style scoped>
p:where(.example-paragraph) {
	margin-block: 16px;
	line-height: 1.8;
	overflow-wrap: anywhere;
}
</style>

许可

vue

<template>
	<div aria-label="完整页头示例">
		<AsamPageHeader @back="onBack">
			<template #breadcrumb>
				<AsamBreadcrumb separator="/">
					<AsamBreadcrumbItem :to="{ path: './page-header.html' }">
						首页
					</AsamBreadcrumbItem>
					<AsamBreadcrumbItem>
						<AsamLink href="/component-AsamPageHeader.html">路由一</AsamLink>
					</AsamBreadcrumbItem>
					<AsamBreadcrumbItem>路由二</AsamBreadcrumbItem>
				</AsamBreadcrumb>
			</template>
			<template #content>
				<div class="flex items-center">
					<AsamAvatar
						class="mr-3"
						:size="32"
						src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E"
					/>
					<span class="text-large font-600 mr-3"> 标题 </span>
					<span class="text-sm mr-2" style="color: var(--el-text-color-regular)">
						副标题
					</span>
					<AsamTag>默认</AsamTag>
				</div>
			</template>
			<template #extra>
				<div class="flex items-center">
					<AsamButton type="default">打印</AsamButton>
					<AsamButton type="default" class="ml-2">编辑</AsamButton>
				</div>
			</template>

			<AsamDescriptions :column="3" size="small" class="mt-4">
				<AsamDescriptionsItem label="用户名"> kooriookami </AsamDescriptionsItem>
				<AsamDescriptionsItem label="电话"> 18100000000 </AsamDescriptionsItem>
				<AsamDescriptionsItem label="地点">苏州</AsamDescriptionsItem>
				<AsamDescriptionsItem label="备注">
					<AsamTag size="small">学校</AsamTag>
				</AsamDescriptionsItem>
				<AsamDescriptionsItem label="地址">
					江苏省苏州市吴中区吴中大道 1188 号
				</AsamDescriptionsItem>
			</AsamDescriptions>
			<p class="mt-4 text-sm example-paragraph">
				说明文本示例：通常按周发布；关键问题采用紧急修复，实际发布次数可能调整。
			</p>
		</AsamPageHeader>
	</div>
</template>

<script setup>
defineOptions({ name: 'AsamPageHeaderCapCompleteDemo' });
import {
	AsamLink,
	AsamPageHeader,
	AsamBreadcrumb,
	AsamBreadcrumbItem,
	AsamAvatar,
	AsamTag,
	AsamButton,
	AsamDescriptions,
	AsamDescriptionsItem
} from '@asam-ui/ui';
import { AsamNotification as notify } from '@asam-ui/ui';
const onBack = () => {
	notify('Back');
};
</script>

<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.flex {
	display: flex;
}

.items-center {
	align-items: center;
}

.mr-3 {
	margin-right: 0.75rem;
}

.text-large {
	font-size: var(--el-font-size-large);
}

.font-600 {
	font-weight: 600;
}

.text-sm {
	font-size: var(--el-font-size-small);
}

.mr-2 {
	margin-right: 0.5rem;
}

.ml-2 {
	margin-left: 0.5rem;
}

.mt-4 {
	margin-top: 1rem;
}
</style>

<style scoped>
p:where(.example-paragraph) {
	margin-block: 16px;
	line-height: 1.8;
	overflow-wrap: anywhere;
}
</style>

基础用法

简单场景下的标准页头。

基础用法

许可

vue

<template>
	<AsamPageHeader @back="goBack">
		<template #content>
			<span class="text-large font-600 mr-3"> 标题 </span>
		</template>
	</AsamPageHeader>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamPageHeaderCapBasicDemo' });
import { AsamPageHeader } from '@asam-ui/ui';

const goBack = () => {
	console.log('go back');
};
</script>

<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.text-large {
	font-size: var(--el-font-size-large);
}

.font-600 {
	font-weight: 600;
}

.mr-3 {
	margin-right: 0.75rem;
}
</style>

许可

vue

<template>
	<AsamPageHeader @back="goBack">
		<template #content>
			<span class="text-large font-600 mr-3"> 标题 </span>
		</template>
	</AsamPageHeader>
</template>

<script setup>
defineOptions({ name: 'AsamPageHeaderCapBasicDemo' });
import { AsamPageHeader } from '@asam-ui/ui';
const goBack = () => {
	console.log('go back');
};
</script>

<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.text-large {
	font-size: var(--el-font-size-large);
}

.font-600 {
	font-weight: 600;
}

.mr-3 {
	margin-right: 0.75rem;
}
</style>

自定义图标

默认图标不适合当前场景时，可以通过 icon 属性自定义图标。具体用法见下方示例。

自定义图标

许可

vue

<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
	<AsamPageHeader :icon="ArrowLeft">
		<template #content>
			<span class="text-large font-600 mr-3"> 标题 </span>
		</template>
	</AsamPageHeader>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamPageHeaderCapCustomIconDemo' });
import { AsamPageHeader } from '@asam-ui/ui';

import { ArrowLeft } from '@asam-ui/icons-vue';
</script>

<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.text-large {
	font-size: var(--el-font-size-large);
}

.font-600 {
	font-weight: 600;
}

.mr-3 {
	margin-right: 0.75rem;
}
</style>

许可

vue

<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
	<AsamPageHeader :icon="ArrowLeft">
		<template #content>
			<span class="text-large font-600 mr-3"> 标题 </span>
		</template>
	</AsamPageHeader>
</template>

<script setup>
defineOptions({ name: 'AsamPageHeaderCapCustomIconDemo' });
import { AsamPageHeader } from '@asam-ui/ui';
import { ArrowLeft } from '@asam-ui/icons-vue';
</script>

<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.text-large {
	font-size: var(--el-font-size-large);
}

.font-600 {
	font-weight: 600;
}

.mr-3 {
	margin-right: 0.75rem;
}
</style>

无图标

页面元素较多、不需要显示图标时，可将 icon 设置为 "" 隐藏图标。

无图标

许可

vue

<template>
	<AsamPageHeader icon="">
		<template #content>
			<span class="text-large font-600 mr-3"> 标题 </span>
		</template>
	</AsamPageHeader>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamPageHeaderCapNoIconDemo' });
import { AsamPageHeader } from '@asam-ui/ui';
</script>

<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.text-large {
	font-size: var(--el-font-size-large);
}

.font-600 {
	font-weight: 600;
}

.mr-3 {
	margin-right: 0.75rem;
}
</style>

许可

vue

<template>
	<AsamPageHeader icon="">
		<template #content>
			<span class="text-large font-600 mr-3"> 标题 </span>
		</template>
	</AsamPageHeader>
</template>

<script setup>
defineOptions({ name: 'AsamPageHeaderCapNoIconDemo' });
import { AsamPageHeader } from '@asam-ui/ui';
</script>

<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.text-large {
	font-size: var(--el-font-size-large);
}

.font-600 {
	font-weight: 600;
}

.mr-3 {
	margin-right: 0.75rem;
}
</style>

面包屑导航

使用页头组件，您可以通过添加插槽 breadcrumb 来设置面包屑路由导航。

许可

vue

<template>
	<AsamPageHeader>
		<template #breadcrumb>
			<AsamBreadcrumb separator="/">
				<AsamBreadcrumbItem :to="{ path: './page-header.html' }"> 首页 </AsamBreadcrumbItem>
				<AsamBreadcrumbItem
					><AsamLink href="/component-AsamPageHeader.html"
						>路由一</AsamLink
					></AsamBreadcrumbItem
				>
				<AsamBreadcrumbItem>路由二</AsamBreadcrumbItem>
			</AsamBreadcrumb>
		</template>

		<template #content>
			<span class="text-large font-600 mr-3"> 标题 </span>
		</template>
	</AsamPageHeader>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamPageHeaderCapBreadcrumbDemo' });
import { AsamLink, AsamPageHeader, AsamBreadcrumb, AsamBreadcrumbItem } from '@asam-ui/ui';
</script>

<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.text-large {
	font-size: var(--el-font-size-large);
}

.font-600 {
	font-weight: 600;
}

.mr-3 {
	margin-right: 0.75rem;
}
</style>

许可

vue

<template>
	<AsamPageHeader>
		<template #breadcrumb>
			<AsamBreadcrumb separator="/">
				<AsamBreadcrumbItem :to="{ path: './page-header.html' }"> 首页 </AsamBreadcrumbItem>
				<AsamBreadcrumbItem
					><AsamLink href="/component-AsamPageHeader.html"
						>路由一</AsamLink
					></AsamBreadcrumbItem
				>
				<AsamBreadcrumbItem>路由二</AsamBreadcrumbItem>
			</AsamBreadcrumb>
		</template>

		<template #content>
			<span class="text-large font-600 mr-3"> 标题 </span>
		</template>
	</AsamPageHeader>
</template>

<script setup>
defineOptions({ name: 'AsamPageHeaderCapBreadcrumbDemo' });
import { AsamLink, AsamPageHeader, AsamBreadcrumb, AsamBreadcrumbItem } from '@asam-ui/ui';
</script>

<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.text-large {
	font-size: var(--el-font-size-large);
}

.font-600 {
	font-weight: 600;
}

.mr-3 {
	margin-right: 0.75rem;
}
</style>

额外操作部分

可以按实际需要在页头添加其他区域，实现更丰富的交互。

额外操作部分

许可

vue

<template>
	<AsamPageHeader icon="">
		<template #content>
			<div class="flex items-center">
				<AsamAvatar
					:size="32"
					class="mr-3"
					src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E"
				/>
				<span class="text-large font-600 mr-3"> 标题 </span>
				<span class="text-sm mr-2" style="color: var(--el-text-color-regular)">
					副标题
				</span>
				<AsamTag>默认</AsamTag>
			</div>
		</template>

		<template #extra>
			<div class="flex items-center">
				<AsamButton type="default">打印</AsamButton>
				<AsamButton type="default" class="ml-2">编辑</AsamButton>
			</div>
		</template>
	</AsamPageHeader>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamPageHeaderCapAdditionalSectionsDemo' });
import { AsamPageHeader, AsamAvatar, AsamTag, AsamButton } from '@asam-ui/ui';
</script>

<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.flex {
	display: flex;
}

.items-center {
	align-items: center;
}

.mr-3 {
	margin-right: 0.75rem;
}

.text-large {
	font-size: var(--el-font-size-large);
}

.font-600 {
	font-weight: 600;
}

.text-sm {
	font-size: var(--el-font-size-small);
}

.mr-2 {
	margin-right: 0.5rem;
}

.ml-2 {
	margin-left: 0.5rem;
}
</style>

许可

vue

<template>
	<AsamPageHeader icon="">
		<template #content>
			<div class="flex items-center">
				<AsamAvatar
					:size="32"
					class="mr-3"
					src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E"
				/>
				<span class="text-large font-600 mr-3"> 标题 </span>
				<span class="text-sm mr-2" style="color: var(--el-text-color-regular)">
					副标题
				</span>
				<AsamTag>默认</AsamTag>
			</div>
		</template>

		<template #extra>
			<div class="flex items-center">
				<AsamButton type="default">打印</AsamButton>
				<AsamButton type="default" class="ml-2">编辑</AsamButton>
			</div>
		</template>
	</AsamPageHeader>
</template>

<script setup>
defineOptions({ name: 'AsamPageHeaderCapAdditionalSectionsDemo' });
import { AsamPageHeader, AsamAvatar, AsamTag, AsamButton } from '@asam-ui/ui';
</script>

<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.flex {
	display: flex;
}

.items-center {
	align-items: center;
}

.mr-3 {
	margin-right: 0.75rem;
}

.text-large {
	font-size: var(--el-font-size-large);
}

.font-600 {
	font-weight: 600;
}

.text-sm {
	font-size: var(--el-font-size-small);
}

.mr-2 {
	margin-right: 0.5rem;
}

.ml-2 {
	margin-left: 0.5rem;
}
</style>

主要内容

有时我们想让页头显示一些协同响应内容，我们可以使用 default 插槽。

主要内容

许可

vue

<template>
	<AsamPageHeader>
		<template #content>
			<span class="text-large font-600 mr-3"> 标题 </span>
		</template>

		<div class="mt-4 text-sm font-bold">通过 default 插槽添加内容，可按实际需要扩展。</div>
	</AsamPageHeader>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamPageHeaderCapMainContentDemo' });
import { AsamPageHeader } from '@asam-ui/ui';
</script>

<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.text-large {
	font-size: var(--el-font-size-large);
}

.font-600 {
	font-weight: 600;
}

.mr-3 {
	margin-right: 0.75rem;
}

.mt-4 {
	margin-top: 1rem;
}

.text-sm {
	font-size: var(--el-font-size-small);
}

.font-bold {
	font-weight: 700;
}
</style>

许可

vue

<template>
	<AsamPageHeader>
		<template #content>
			<span class="text-large font-600 mr-3"> 标题 </span>
		</template>

		<div class="mt-4 text-sm font-bold">通过 default 插槽添加内容，可按实际需要扩展。</div>
	</AsamPageHeader>
</template>

<script setup>
defineOptions({ name: 'AsamPageHeaderCapMainContentDemo' });
import { AsamPageHeader } from '@asam-ui/ui';
</script>

<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.text-large {
	font-size: var(--el-font-size-large);
}

.font-600 {
	font-weight: 600;
}

.mr-3 {
	margin-right: 0.75rem;
}

.mt-4 {
	margin-top: 1rem;
}

.text-sm {
	font-size: var(--el-font-size-small);
}

.font-bold {
	font-weight: 700;
}
</style>

API

属性 `AsamPageHeaderProps`

属性名	说明	类型	默认值
`icon`	图标内容	`AsamPageHeaderExpose["icon"] \| undefined`	`工厂函数（每个实例创建）`
`title`	页头主标题。	`string \| undefined`	—
`content`	内容	`string \| undefined`	`""`
`onBack`	—	`(() => any) \| undefined`	—
`key`	—	`PropertyKey \| undefined`	—
`ref`	—	`VNodeRef \| undefined`	—
`ref_for`	—	`boolean \| undefined`	—
`ref_key`	—	`string \| undefined`	—
`onVnodeBeforeMount`	—	`(AsamPageHeaderProps)["onVnodeBeforeMount"]`	—
`onVnodeMounted`	—	`(AsamPageHeaderProps)["onVnodeMounted"]`	—
`onVnodeBeforeUpdate`	—	`(AsamPageHeaderProps)["onVnodeBeforeUpdate"]`	—
`onVnodeUpdated`	—	`(AsamPageHeaderProps)["onVnodeUpdated"]`	—
`onVnodeBeforeUnmount`	—	`(AsamPageHeaderProps)["onVnodeBeforeUnmount"]`	—
`onVnodeUnmounted`	—	`(AsamPageHeaderProps)["onVnodeUnmounted"]`	—
`class`	—	`unknown`	—
`style`	—	`unknown`	—

实例方法与状态 `AsamPageHeaderExpose`

属性名	说明	类型	默认值
`$`	—	`AsamPageHeaderExpose["$"]`	—
`$data`	—	`AsamTableColumnExpose`	—
`$props`	—	`AsamPageHeaderProps`	—
`$attrs`	—	`AsamPageHeaderExpose["$attrs"]`	—
`$refs`	—	`AsamPageHeaderExpose["$refs"]`	—
`$slots`	—	`AsamPageHeaderSlots`	—
`$root`	—	查看完整类型 `ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> \| null`	—
`$parent`	—	查看完整类型 `ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> \| null`	—
`$host`	—	`Element \| null`	—
`$emit`	—	`(event: "back") => void`	—
`$el`	—	`any`	—
`$options`	—	`(AsamPageHeaderExpose)["$options"]`	—
`$forceUpdate`	—	`() => void`	—
`$nextTick`	—	`(AsamPageHeaderExpose)["$nextTick"]`	—
`$watch`	—	`(AsamPageHeaderExpose)["$watch"]`	—
`content`	—	`string`	—
`icon`	—	`AsamPageHeaderExpose["icon"]`	—
`title`	页头主标题。	`string \| undefined`	—
`onBack`	—	`(() => any) \| undefined`	—
`$route`	当前规范化路由位置，详见 RouteLocationNormalizedLoaded。	`AsamPageHeaderExpose["$route"]`	—
`$router`	应用使用的 Router 实例。	`AsamPageHeaderExpose["$router"]`	—

类型 `AsamPageHeaderInstance`

属性名	说明	类型	默认值
`$`	—	`AsamPageHeaderExpose["$"]`	—
`$data`	—	`AsamTableColumnExpose`	—
`$props`	—	`AsamPageHeaderProps`	—
`$attrs`	—	`AsamPageHeaderExpose["$attrs"]`	—
`$refs`	—	`AsamPageHeaderExpose["$refs"]`	—
`$slots`	—	`AsamPageHeaderSlots`	—
`$root`	—	查看完整类型 `ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> \| null`	—
`$parent`	—	查看完整类型 `ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> \| null`	—
`$host`	—	`Element \| null`	—
`$emit`	—	`(event: "back") => void`	—
`$el`	—	`any`	—
`$options`	—	`(AsamPageHeaderInstance)["$options"]`	—
`$forceUpdate`	—	`() => void`	—
`$nextTick`	—	`(AsamPageHeaderInstance)["$nextTick"]`	—
`$watch`	—	`(AsamPageHeaderInstance)["$watch"]`	—
`content`	—	`string`	—
`icon`	—	`AsamPageHeaderExpose["icon"]`	—
`title`	页头主标题。	`string \| undefined`	—
`onBack`	—	`(() => any) \| undefined`	—
`$route`	当前规范化路由位置，详见 RouteLocationNormalizedLoaded。	`AsamPageHeaderExpose["$route"]`	—
`$router`	应用使用的 Router 实例。	`AsamPageHeaderExpose["$router"]`	—

插槽 `AsamPageHeaderSlots`

属性名	说明	类型	默认值
`breadcrumb`	—	`(AsamPageHeaderSlots)["breadcrumb"]`	—
`icon`	—	`(AsamPageHeaderSlots)["icon"]`	—
`title`	—	`(AsamPageHeaderSlots)["title"]`	—
`content`	—	`(AsamPageHeaderSlots)["content"]`	—
`extra`	—	`(AsamPageHeaderSlots)["extra"]`	—
`default`	—	`(AsamPageHeaderSlots)["default"]`	—

事件 `AsamPageHeaderEmits`

属性名	说明	类型	默认值
`back`	—	`() => boolean`	—

类型 `AsamPageHeaderPropsPublic`

属性名	说明	类型	默认值
`content`	—	`string \| undefined`	—
`title`	—	`string \| undefined`	—
`icon`	—	`(AsamPageHeaderPropsPublic)["icon"]`	—

参数与事件补充说明

公开绑定参数，包含具备类型的事件监听器；默认值由运行时定义提供。

参数与事件说明

`icon`

必填：否；声明来源：上游声明。

icon 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(props: any, ctx: Parameters<Extract<NonNullable<AsamPageHeaderExpose["icon"] | undefined>, (...args: never[]) => unknown>>[1]): any

icon.__isFragment: undefined — 依赖声明
icon.__isTeleport: undefined — 依赖声明
icon.__isSuspense: undefined — 依赖声明

默认值与来源

工厂函数（每个实例创建）（实例工厂；已安装组件）

固定上游文档默认：Back（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

固定上游源码默认表达式：() => Back（2.14.7；源码事实，未作为 ASAM 运行实测）

`title`

必填：否；声明来源：上游声明。

默认值与来源

未知 / 未声明

固定上游文档默认：''（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

`content`

必填：否；声明来源：上游声明。

默认值与来源

""（已安装运行时；已安装组件）

固定上游文档默认：''（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）

`onBack`

必填：否；声明来源：上游声明。

onBack 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(): any

`key`

必填：否；声明来源：依赖声明。

`ref`

必填：否；声明来源：依赖声明。

ref 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(ref: Element | ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null, refs: Record<string, any>): void

ref.value: any — 依赖声明
ref.__@RefSymbol@8854: true — 依赖声明
仅用于区分类型：保留在公开声明中，通过私有 Symbol 避免出现在编辑器自动补全中。
枚举：true

`ref_for`

必填：否；声明来源：依赖声明。

ref_for 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

`ref_key`

必填：否；声明来源：依赖声明。

`onVnodeBeforeMount`

必填：否；声明来源：依赖声明。

onVnodeBeforeMount 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void

`onVnodeMounted`

必填：否；声明来源：依赖声明。

onVnodeMounted 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void

`onVnodeBeforeUpdate`

必填：否；声明来源：依赖声明。

onVnodeBeforeUpdate 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>, oldVNode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void

`onVnodeUpdated`

必填：否；声明来源：依赖声明。

onVnodeUpdated 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>, oldVNode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void

`onVnodeBeforeUnmount`

必填：否；声明来源：依赖声明。

onVnodeBeforeUnmount 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void

`onVnodeUnmounted`

必填：否；声明来源：依赖声明。

onVnodeUnmounted 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void

`class`

必填：否；声明来源：依赖声明。

`style`

必填：否；声明来源：依赖声明。

AsamPageHeaderProps 公开类型视图

import type { VNodeRef, ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions, VNode, RendererNode, RendererElement } from 'vue';
import type { AsamPageHeaderProps, AsamPageHeaderExpose } from '@asam-ui/ui';

type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;

// AsamPageHeaderProps
type PublicContract = {
	readonly "icon"?: AsamPageHeaderExpose["icon"] | undefined;
	readonly "title"?: string | undefined;
	readonly "content"?: string | undefined;
	readonly "onBack"?: (() => any) | undefined;
	"key"?: PropertyKey | undefined;
	"ref"?: VNodeRef | undefined;
	"ref_for"?: boolean | undefined;
	"ref_key"?: string | undefined;
	"onVnodeBeforeMount"?: (AsamPageHeaderProps)["onVnodeBeforeMount"];
	"onVnodeMounted"?: (AsamPageHeaderProps)["onVnodeMounted"];
	"onVnodeBeforeUpdate"?: (AsamPageHeaderProps)["onVnodeBeforeUpdate"];
	"onVnodeUpdated"?: (AsamPageHeaderProps)["onVnodeUpdated"];
	"onVnodeBeforeUnmount"?: (AsamPageHeaderProps)["onVnodeBeforeUnmount"];
	"onVnodeUnmounted"?: (AsamPageHeaderProps)["onVnodeUnmounted"];
	"class"?: unknown;
	"style"?: unknown;
};

完整的上游实例，包含全部公开方法与响应式状态。

参数与事件说明

`$`

必填：是；声明来源：依赖声明。

$ 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$data`

必填：是；声明来源：依赖声明。

`$props`

必填：是；声明来源：依赖声明。

`$attrs`

必填：是；声明来源：依赖声明。

$attrs 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$refs`

必填：是；声明来源：依赖声明。

$refs 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$slots`

必填：是；声明来源：依赖声明。

`$root`

必填：是；声明来源：依赖声明。

`$parent`

必填：是；声明来源：依赖声明。

`$host`

必填：是；声明来源：依赖声明。

$host 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：大型实例类型；完整类型见公开类型视图。

`$emit`

必填：是；声明来源：依赖声明。

$emit 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(event: "back", ...args: Parameters<Extract<NonNullable<(event: "back") => void>, (...args: never[]) => unknown>> extends [unknown, ...infer Rest] ? Rest : never): void

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$el`

必填：是；声明来源：依赖声明。

`$options`

必填：是；声明来源：依赖声明。

`$forceUpdate`

必填：是；声明来源：依赖声明。

$forceUpdate 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(): void

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$nextTick`

必填：是；声明来源：依赖声明。

$nextTick 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(): Promise<void>

事件参数：<T, R>(this: T, fn: (this: T) => R | Promise<R>): Promise<R>

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$watch`

必填：是；声明来源：依赖声明。

$watch 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：<T extends string | ((...args: any) => any)>(source: T, cb: Parameters<Extract<NonNullable<(AsamPageHeaderExpose)["$watch"]>, (...args: never[]) => unknown>>[1], options?: WatchOptions<boolean> | undefined): WatchStopHandle

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`content`

必填：是；声明来源：上游声明。

`icon`

必填：是；声明来源：上游声明。

icon 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(props: any, ctx: Parameters<Extract<NonNullable<AsamPageHeaderExpose["icon"]>, (...args: never[]) => unknown>>[1]): any

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`title`

必填：否；声明来源：上游声明。

`onBack`

必填：否；声明来源：上游声明。

onBack 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(): any

`$route`

必填：是；声明来源：依赖声明。

$route 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

$route.matched: (NonNullable<AsamPageHeaderExpose["$route"]>)["matched"] — 依赖声明
仅包含普通组件的 RouteLocationMatched 数组；懒加载组件已解析并替换 components 中的值，可直接展示路由，不包含重定向记录。此属性不可枚举。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$route.name: (NonNullable<AsamPageHeaderExpose["$route"]>)["name"] — 依赖声明
匹配路由记录的名称。
$route.fullPath: string — 依赖声明
包含 search 和 hash 的完整位置字符串，使用百分号编码。
$route.query: (NonNullable<AsamPageHeaderExpose["$route"]>)["query"] — 依赖声明
当前位置 search 属性的对象表示。
$route.hash: string — 依赖声明
当前位置的哈希片段；存在时以 # 开头。
$route.redirectedFrom: (NonNullable<AsamPageHeaderExpose["$route"]>)["redirectedFrom"] — 依赖声明
最终到达当前位置之前，最初尝试访问的位置。
- $route.redirectedFrom.matched: PublicMember<NonNullable<(NonNullable<AsamPageHeaderExpose["$route"]>)["redirectedFrom"]>, "matched"> — 依赖声明
  包含添加路由时原始组件的 RouteRecord 数组，也可能包含重定向记录，不能直接用于展示。此属性不可枚举。
  嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
- $route.redirectedFrom.fullPath: string — 依赖声明
  包含 search 和 hash 的完整位置字符串，使用百分号编码。
- $route.redirectedFrom.query: PublicMember<NonNullable<(NonNullable<AsamPageHeaderExpose["$route"]>)["redirectedFrom"]>, "query"> — 依赖声明
  当前位置 search 属性的对象表示。
- $route.redirectedFrom.hash: string — 依赖声明
  当前位置的哈希片段；存在时以 # 开头。
- $route.redirectedFrom.redirectedFrom: PublicMember<NonNullable<(NonNullable<AsamPageHeaderExpose["$route"]>)["redirectedFrom"]>, "redirectedFrom"> — 依赖声明
  最终到达当前位置之前，最初尝试访问的位置。
  嵌套展开边界：递归引用；完整类型见公开类型视图。
- $route.redirectedFrom.name: PublicMember<NonNullable<(NonNullable<AsamPageHeaderExpose["$route"]>)["redirectedFrom"]>, "name"> — 依赖声明
  匹配路由记录的名称。
- $route.redirectedFrom.meta: PublicMember<NonNullable<(NonNullable<AsamPageHeaderExpose["$route"]>)["redirectedFrom"]>, "meta"> — 依赖声明
  全部匹配路由记录合并后的 meta 属性。
- $route.redirectedFrom.params: PublicMember<NonNullable<(NonNullable<AsamPageHeaderExpose["$route"]>)["redirectedFrom"]>, "params"> — 依赖声明
  从 path 提取并解码后的参数对象。
- $route.redirectedFrom.path: string — 依赖声明
  URL 中经过百分号编码的路径部分。
- $route.redirectedFrom.replace: boolean | undefined — 依赖声明
  替换当前历史记录，而不是添加新记录。
  枚举：false / true
- $route.redirectedFrom.force: boolean | undefined — 依赖声明
  即使目标与当前位置相同，也触发导航；除非传入 replace: true，否则会添加一条历史记录。
  枚举：false / true
- $route.redirectedFrom.state: PublicMember<NonNullable<(NonNullable<AsamPageHeaderExpose["$route"]>)["redirectedFrom"]>, "state"> — 依赖声明
  通过 History API 保存的状态；不能包含响应式值，也不允许 Symbol 等部分值。详情参见 https://developer.mozilla.org/zh-CN/docs/Web/API/History/state。
$route.meta: (NonNullable<AsamPageHeaderExpose["$route"]>)["meta"] — 依赖声明
全部匹配路由记录合并后的 meta 属性。
$route.params: (NonNullable<AsamPageHeaderExpose["$route"]>)["params"] — 依赖声明
从 path 提取并解码后的参数对象。
$route.path: string — 依赖声明
URL 中经过百分号编码的路径部分。

`$router`

必填：是；声明来源：依赖声明。

$router 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

$router.options: (NonNullable<AsamPageHeaderExpose["$router"]>)["options"] — 依赖声明
创建路由器时传入的原始配置对象。
- $router.options.routes: (NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["options"]>)["routes"] — 依赖声明
  需要添加到路由器的初始路由列表。
  嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
- $router.options.history: (NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["options"]>)["history"] — 依赖声明
  路由器使用的历史记录实现。通常使用 createWebHistory，并配置服务器回退；createWebHashHistory 无需服务器配置，但搜索引擎无法处理其哈希路由，影响搜索优化。
  - $router.options.history.base: string — 依赖声明
    添加到每个 URL 前的基础路径；例如 base 为 /sub-folder 时，可将单页应用部署在域名的对应子目录。
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.location: string — 依赖声明
    当前历史记录位置。
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.state: (NonNullable<(NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["options"]>)["history"]>)["state"] — 依赖声明
    当前历史记录状态。
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.push: (NonNullable<(NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["options"]>)["history"]>)["push"] — 依赖声明
    导航到指定位置；使用 HTML5 History 时，通过 history.pushState 实际更新 URL。
    事件参数：(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["options"]>)["history"]>)["push"]>, (...args: never[]) => unknown>>[1]): void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.replace: (NonNullable<(NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["options"]>)["history"]>)["replace"] — 依赖声明
    与 RouterHistory.push 类似，但调用 history.replaceState，而非 history.pushState。
    事件参数：(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["options"]>)["history"]>)["replace"]>, (...args: never[]) => unknown>>[1]): void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.go: (delta: number, triggerListeners?: boolean) => void — 依赖声明
    按指定方向遍历历史记录。
    事件参数：(delta: number, triggerListeners?: boolean | undefined): void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.listen: (NonNullable<(NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["options"]>)["history"]>)["listen"] — 依赖声明
    为历史记录实现添加监听器；由浏览器前进、后退等外部导航，或传入 true 的 RouterHistory.back、RouterHistory.forward 触发。
    事件参数：(callback: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["options"]>)["history"]>)["listen"]>, (...args: never[]) => unknown>>[0]): () => void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.createHref: (location: AsamPageHeaderExpose["content"]) => string — 依赖声明
    生成用于链接元素的对应 href。
    事件参数：(location: string): string
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.destroy: () => void — 依赖声明
    清除历史记录实现注册的全部事件监听器。
    事件参数：(): void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
- $router.options.scrollBehavior: (NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["options"]>)["scrollBehavior"] — 依赖声明
  控制页面导航时滚动行为的函数；可返回 Promise 延迟滚动。
  事件参数：(to: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[0], from: AsamPageHeaderExpose["$route"], savedPosition: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[2]): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>
- $router.options.parseQuery: (NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["options"]>)["parseQuery"] — 依赖声明
  自定义查询参数解析函数；与 EXPERIMENTAL_RouterOptions_Base.stringifyQuery 配套。
  事件参数：(search: string): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["options"]>)["parseQuery"]>, (...args: never[]) => unknown>>
- $router.options.stringifyQuery: (NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["options"]>)["stringifyQuery"] — 依赖声明
  自定义查询对象序列化函数；不要添加开头的 ?，与 parseQuery 的解析函数配套。
  事件参数：(query: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["options"]>)["stringifyQuery"]>, (...args: never[]) => unknown>>[0]): string
- $router.options.linkActiveClass: string | undefined — 依赖声明
  应用于激活 RouterLink 的默认类名；未指定时使用 router-link-active。
- $router.options.linkExactActiveClass: string | undefined — 依赖声明
  应用于精确激活 RouterLink 的默认类名；未指定时使用 router-link-exact-active。
- $router.options.end: boolean | undefined — 依赖声明
  是否在表达式末尾添加 $，使其匹配到路径结尾。
  声明默认：`true`（注释，实际运行默认以源码/安装包为准）
  枚举：false / true
- $router.options.sensitive: boolean | undefined — 依赖声明
  使正则表达式区分大小写。
  声明默认：`false`（注释，实际运行默认以源码/安装包为准）
  枚举：false / true
- $router.options.strict: boolean | undefined — 依赖声明
  是否禁止路径末尾的斜杠。
  声明默认：`false`（注释，实际运行默认以源码/安装包为准）
  枚举：false / true
$router.addRoute: (NonNullable<AsamPageHeaderExpose["$router"]>)["addRoute"] — 依赖声明
向已有路由添加子路由，或向路由器添加新的 RouteRecordRaw 路由记录。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.removeRoute: (NonNullable<AsamPageHeaderExpose["$router"]>)["removeRoute"] — 依赖声明
按名称移除已有路由。
事件参数：(name: Parameters<Extract<NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["removeRoute"]>, (...args: never[]) => unknown>>[0]): void
$router.clearRoutes: () => void — 依赖声明
从路由器中删除全部路由。
事件参数：(): void
$router.currentRoute: ShallowRef<AsamPageHeaderExpose["$route"]> — 依赖声明
当前 RouteLocationNormalized。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$router.listening: boolean — 依赖声明
允许关闭历史事件监听，这是用于微前端的底层 API。
枚举：false / true
$router.hasRoute: (NonNullable<AsamPageHeaderExpose["$router"]>)["hasRoute"] — 依赖声明
检查指定名称的路由是否存在。
事件参数：(name: Parameters<Extract<NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["hasRoute"]>, (...args: never[]) => unknown>>[0]): boolean
$router.getRoutes: (NonNullable<AsamPageHeaderExpose["$router"]>)["getRoutes"] — 依赖声明
获取全部 RouteRecord 路由记录的完整列表。
事件参数：(): ReturnType<Extract<NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["getRoutes"]>, (...args: never[]) => unknown>>
$router.resolve: (NonNullable<AsamPageHeaderExpose["$router"]>)["resolve"] — 依赖声明
返回 RouteLocationRaw 的规范化位置，包含带基础路径的 href；默认使用 router.currentRoute 作为 currentLocation，仅在高级场景中覆盖。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.push: (NonNullable<AsamPageHeaderExpose["$router"]>)["push"] — 依赖声明
通过向历史栈添加记录，以编程方式导航到新 URL。
事件参数：(to: Parameters<Extract<NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["push"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["push"]>, (...args: never[]) => unknown>>
$router.replace: (NonNullable<AsamPageHeaderExpose["$router"]>)["replace"] — 依赖声明
通过替换历史栈中的当前记录，以编程方式导航到新 URL。
事件参数：(to: Parameters<Extract<NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["replace"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["replace"]>, (...args: never[]) => unknown>>
$router.back: () => void — 依赖声明
通过 history.back() 在可用时后退，等价于 router.go(-1)。
事件参数：(): void
$router.forward: () => void — 依赖声明
通过 history.forward() 在可用时前进，等价于 router.go(1)。
事件参数：(): void
$router.go: (delta: number) => void — 依赖声明
通过调用 history.go() 在历史记录中前进或后退。
事件参数：(delta: number): void
$router.beforeEach: (NonNullable<AsamPageHeaderExpose["$router"]>)["beforeEach"] — 依赖声明
添加每次导航之前执行的守卫，并返回移除此守卫的函数。
事件参数：(guard: Parameters<Extract<NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["beforeEach"]>, (...args: never[]) => unknown>>[0]): () => void
$router.beforeResolve: (NonNullable<AsamPageHeaderExpose["$router"]>)["beforeResolve"] — 依赖声明
添加导航确认之前执行的守卫，此时组件已获取且其他导航守卫已通过；返回移除此守卫的函数。
事件参数：(guard: Parameters<Extract<NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["beforeResolve"]>, (...args: never[]) => unknown>>[0]): () => void
$router.afterEach: (NonNullable<AsamPageHeaderExpose["$router"]>)["afterEach"] — 依赖声明
添加每次导航结束后执行的钩子，并返回移除此钩子的函数。
事件参数：(guard: Parameters<Extract<NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["afterEach"]>, (...args: never[]) => unknown>>[0]): () => void
$router.onError: (NonNullable<AsamPageHeaderExpose["$router"]>)["onError"] — 依赖声明
添加导航期间未捕获错误的处理函数，涵盖同步和异步异常、守卫返回或传给 next 的错误，以及路由异步组件解析错误。
事件参数：(handler: Parameters<Extract<NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["onError"]>, (...args: never[]) => unknown>>[0]): () => void
$router.isReady: () => Promise<void> — 依赖声明
返回在初次导航完成后兑现的 Promise，此时关联的异步进入钩子与异步组件均已解析；导航已完成时立即兑现。可用于保持服务端与客户端渲染一致；服务端需手动推入初始位置，客户端从 URL 自动读取。
事件参数：(): Promise<void>
$router.install: (app: App) => void — 依赖声明
由 app.use(router) 自动调用，用户不应手动调用；客户端调用时会触发初次导航。
事件参数：(app: App<any>): void

AsamPageHeaderExpose 公开类型视图

import type { ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions, ComponentOptionsMixin, GlobalComponents, GlobalDirectives, WatchOptions, WatchStopHandle, ShallowRef, App } from 'vue';
import type { AsamPageHeaderExpose, AsamTableColumnExpose, AsamPageHeaderProps, AsamPageHeaderSlots } from '@asam-ui/ui';

type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;

// AsamPageHeaderExpose
type PublicContract = {
	"$": AsamPageHeaderExpose["$"];
	"$data": AsamTableColumnExpose;
	"$props": AsamPageHeaderProps;
	"$attrs": AsamPageHeaderExpose["$attrs"];
	"$refs": AsamPageHeaderExpose["$refs"];
	"$slots": AsamPageHeaderSlots;
	"$root": ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
	"$parent": ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
	"$host": Element | null;
	"$emit": (event: "back") => void;
	"$el": any;
	"$options": (AsamPageHeaderExpose)["$options"];
	"$forceUpdate": () => void;
	"$nextTick": (AsamPageHeaderExpose)["$nextTick"];
	"$watch": (AsamPageHeaderExpose)["$watch"];
	readonly "content": string;
	readonly "icon": AsamPageHeaderExpose["icon"];
	readonly "title"?: string | undefined;
	readonly "onBack"?: (() => any) | undefined;
	"$route": AsamPageHeaderExpose["$route"];
	"$router": AsamPageHeaderExpose["$router"];
};

参数与事件说明

`$`

必填：是；声明来源：依赖声明。

$ 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$data`

必填：是；声明来源：依赖声明。

`$props`

必填：是；声明来源：依赖声明。

`$attrs`

必填：是；声明来源：依赖声明。

$attrs 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$refs`

必填：是；声明来源：依赖声明。

$refs 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$slots`

必填：是；声明来源：依赖声明。

`$root`

必填：是；声明来源：依赖声明。

`$parent`

必填：是；声明来源：依赖声明。

`$host`

必填：是；声明来源：依赖声明。

$host 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：大型实例类型；完整类型见公开类型视图。

`$emit`

必填：是；声明来源：依赖声明。

$emit 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(event: "back", ...args: Parameters<Extract<NonNullable<(event: "back") => void>, (...args: never[]) => unknown>> extends [unknown, ...infer Rest] ? Rest : never): void

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$el`

必填：是；声明来源：依赖声明。

`$options`

必填：是；声明来源：依赖声明。

`$forceUpdate`

必填：是；声明来源：依赖声明。

$forceUpdate 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(): void

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$nextTick`

必填：是；声明来源：依赖声明。

$nextTick 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(): Promise<void>

事件参数：<T, R>(this: T, fn: (this: T) => R | Promise<R>): Promise<R>

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$watch`

必填：是；声明来源：依赖声明。

$watch 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：<T extends string | ((...args: any) => any)>(source: T, cb: Parameters<Extract<NonNullable<(AsamPageHeaderInstance)["$watch"]>, (...args: never[]) => unknown>>[1], options?: WatchOptions<boolean> | undefined): WatchStopHandle

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`content`

必填：是；声明来源：上游声明。

`icon`

必填：是；声明来源：上游声明。

icon 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(props: any, ctx: Parameters<Extract<NonNullable<AsamPageHeaderExpose["icon"]>, (...args: never[]) => unknown>>[1]): any

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`title`

必填：否；声明来源：上游声明。

`onBack`

必填：否；声明来源：上游声明。

onBack 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(): any

`$route`

必填：是；声明来源：依赖声明。

$route 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

$route.matched: (NonNullable<AsamPageHeaderExpose["$route"]>)["matched"] — 依赖声明
仅包含普通组件的 RouteLocationMatched 数组；懒加载组件已解析并替换 components 中的值，可直接展示路由，不包含重定向记录。此属性不可枚举。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$route.name: (NonNullable<AsamPageHeaderExpose["$route"]>)["name"] — 依赖声明
匹配路由记录的名称。
$route.fullPath: string — 依赖声明
包含 search 和 hash 的完整位置字符串，使用百分号编码。
$route.query: (NonNullable<AsamPageHeaderExpose["$route"]>)["query"] — 依赖声明
当前位置 search 属性的对象表示。
$route.hash: string — 依赖声明
当前位置的哈希片段；存在时以 # 开头。
$route.redirectedFrom: (NonNullable<AsamPageHeaderExpose["$route"]>)["redirectedFrom"] — 依赖声明
最终到达当前位置之前，最初尝试访问的位置。
- $route.redirectedFrom.matched: PublicMember<NonNullable<(NonNullable<AsamPageHeaderExpose["$route"]>)["redirectedFrom"]>, "matched"> — 依赖声明
  包含添加路由时原始组件的 RouteRecord 数组，也可能包含重定向记录，不能直接用于展示。此属性不可枚举。
  嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
- $route.redirectedFrom.fullPath: string — 依赖声明
  包含 search 和 hash 的完整位置字符串，使用百分号编码。
- $route.redirectedFrom.query: PublicMember<NonNullable<(NonNullable<AsamPageHeaderExpose["$route"]>)["redirectedFrom"]>, "query"> — 依赖声明
  当前位置 search 属性的对象表示。
- $route.redirectedFrom.hash: string — 依赖声明
  当前位置的哈希片段；存在时以 # 开头。
- $route.redirectedFrom.redirectedFrom: PublicMember<NonNullable<(NonNullable<AsamPageHeaderExpose["$route"]>)["redirectedFrom"]>, "redirectedFrom"> — 依赖声明
  最终到达当前位置之前，最初尝试访问的位置。
  嵌套展开边界：递归引用；完整类型见公开类型视图。
- $route.redirectedFrom.name: PublicMember<NonNullable<(NonNullable<AsamPageHeaderExpose["$route"]>)["redirectedFrom"]>, "name"> — 依赖声明
  匹配路由记录的名称。
- $route.redirectedFrom.meta: PublicMember<NonNullable<(NonNullable<AsamPageHeaderExpose["$route"]>)["redirectedFrom"]>, "meta"> — 依赖声明
  全部匹配路由记录合并后的 meta 属性。
- $route.redirectedFrom.params: PublicMember<NonNullable<(NonNullable<AsamPageHeaderExpose["$route"]>)["redirectedFrom"]>, "params"> — 依赖声明
  从 path 提取并解码后的参数对象。
- $route.redirectedFrom.path: string — 依赖声明
  URL 中经过百分号编码的路径部分。
- $route.redirectedFrom.replace: boolean | undefined — 依赖声明
  替换当前历史记录，而不是添加新记录。
  枚举：false / true
- $route.redirectedFrom.force: boolean | undefined — 依赖声明
  即使目标与当前位置相同，也触发导航；除非传入 replace: true，否则会添加一条历史记录。
  枚举：false / true
- $route.redirectedFrom.state: PublicMember<NonNullable<(NonNullable<AsamPageHeaderExpose["$route"]>)["redirectedFrom"]>, "state"> — 依赖声明
  通过 History API 保存的状态；不能包含响应式值，也不允许 Symbol 等部分值。详情参见 https://developer.mozilla.org/zh-CN/docs/Web/API/History/state。
$route.meta: (NonNullable<AsamPageHeaderExpose["$route"]>)["meta"] — 依赖声明
全部匹配路由记录合并后的 meta 属性。
$route.params: (NonNullable<AsamPageHeaderExpose["$route"]>)["params"] — 依赖声明
从 path 提取并解码后的参数对象。
$route.path: string — 依赖声明
URL 中经过百分号编码的路径部分。

`$router`

必填：是；声明来源：依赖声明。

$router 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

$router.options: (NonNullable<AsamPageHeaderExpose["$router"]>)["options"] — 依赖声明
创建路由器时传入的原始配置对象。
- $router.options.routes: (NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["options"]>)["routes"] — 依赖声明
  需要添加到路由器的初始路由列表。
  嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
- $router.options.history: (NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["options"]>)["history"] — 依赖声明
  路由器使用的历史记录实现。通常使用 createWebHistory，并配置服务器回退；createWebHashHistory 无需服务器配置，但搜索引擎无法处理其哈希路由，影响搜索优化。
  - $router.options.history.base: string — 依赖声明
    添加到每个 URL 前的基础路径；例如 base 为 /sub-folder 时，可将单页应用部署在域名的对应子目录。
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.location: string — 依赖声明
    当前历史记录位置。
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.state: (NonNullable<(NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["options"]>)["history"]>)["state"] — 依赖声明
    当前历史记录状态。
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.push: (NonNullable<(NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["options"]>)["history"]>)["push"] — 依赖声明
    导航到指定位置；使用 HTML5 History 时，通过 history.pushState 实际更新 URL。
    事件参数：(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["options"]>)["history"]>)["push"]>, (...args: never[]) => unknown>>[1]): void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.replace: (NonNullable<(NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["options"]>)["history"]>)["replace"] — 依赖声明
    与 RouterHistory.push 类似，但调用 history.replaceState，而非 history.pushState。
    事件参数：(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["options"]>)["history"]>)["replace"]>, (...args: never[]) => unknown>>[1]): void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.go: (delta: number, triggerListeners?: boolean) => void — 依赖声明
    按指定方向遍历历史记录。
    事件参数：(delta: number, triggerListeners?: boolean | undefined): void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.listen: (NonNullable<(NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["options"]>)["history"]>)["listen"] — 依赖声明
    为历史记录实现添加监听器；由浏览器前进、后退等外部导航，或传入 true 的 RouterHistory.back、RouterHistory.forward 触发。
    事件参数：(callback: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["options"]>)["history"]>)["listen"]>, (...args: never[]) => unknown>>[0]): () => void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.createHref: (location: AsamPageHeaderExpose["content"]) => string — 依赖声明
    生成用于链接元素的对应 href。
    事件参数：(location: string): string
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.destroy: () => void — 依赖声明
    清除历史记录实现注册的全部事件监听器。
    事件参数：(): void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
- $router.options.scrollBehavior: (NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["options"]>)["scrollBehavior"] — 依赖声明
  控制页面导航时滚动行为的函数；可返回 Promise 延迟滚动。
  事件参数：(to: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[0], from: AsamPageHeaderExpose["$route"], savedPosition: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[2]): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>
- $router.options.parseQuery: (NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["options"]>)["parseQuery"] — 依赖声明
  自定义查询参数解析函数；与 EXPERIMENTAL_RouterOptions_Base.stringifyQuery 配套。
  事件参数：(search: string): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["options"]>)["parseQuery"]>, (...args: never[]) => unknown>>
- $router.options.stringifyQuery: (NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["options"]>)["stringifyQuery"] — 依赖声明
  自定义查询对象序列化函数；不要添加开头的 ?，与 parseQuery 的解析函数配套。
  事件参数：(query: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["options"]>)["stringifyQuery"]>, (...args: never[]) => unknown>>[0]): string
- $router.options.linkActiveClass: string | undefined — 依赖声明
  应用于激活 RouterLink 的默认类名；未指定时使用 router-link-active。
- $router.options.linkExactActiveClass: string | undefined — 依赖声明
  应用于精确激活 RouterLink 的默认类名；未指定时使用 router-link-exact-active。
- $router.options.end: boolean | undefined — 依赖声明
  是否在表达式末尾添加 $，使其匹配到路径结尾。
  声明默认：`true`（注释，实际运行默认以源码/安装包为准）
  枚举：false / true
- $router.options.sensitive: boolean | undefined — 依赖声明
  使正则表达式区分大小写。
  声明默认：`false`（注释，实际运行默认以源码/安装包为准）
  枚举：false / true
- $router.options.strict: boolean | undefined — 依赖声明
  是否禁止路径末尾的斜杠。
  声明默认：`false`（注释，实际运行默认以源码/安装包为准）
  枚举：false / true
$router.addRoute: (NonNullable<AsamPageHeaderExpose["$router"]>)["addRoute"] — 依赖声明
向已有路由添加子路由，或向路由器添加新的 RouteRecordRaw 路由记录。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.removeRoute: (NonNullable<AsamPageHeaderExpose["$router"]>)["removeRoute"] — 依赖声明
按名称移除已有路由。
事件参数：(name: Parameters<Extract<NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["removeRoute"]>, (...args: never[]) => unknown>>[0]): void
$router.clearRoutes: () => void — 依赖声明
从路由器中删除全部路由。
事件参数：(): void
$router.currentRoute: ShallowRef<AsamPageHeaderExpose["$route"]> — 依赖声明
当前 RouteLocationNormalized。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$router.listening: boolean — 依赖声明
允许关闭历史事件监听，这是用于微前端的底层 API。
枚举：false / true
$router.hasRoute: (NonNullable<AsamPageHeaderExpose["$router"]>)["hasRoute"] — 依赖声明
检查指定名称的路由是否存在。
事件参数：(name: Parameters<Extract<NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["hasRoute"]>, (...args: never[]) => unknown>>[0]): boolean
$router.getRoutes: (NonNullable<AsamPageHeaderExpose["$router"]>)["getRoutes"] — 依赖声明
获取全部 RouteRecord 路由记录的完整列表。
事件参数：(): ReturnType<Extract<NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["getRoutes"]>, (...args: never[]) => unknown>>
$router.resolve: (NonNullable<AsamPageHeaderExpose["$router"]>)["resolve"] — 依赖声明
返回 RouteLocationRaw 的规范化位置，包含带基础路径的 href；默认使用 router.currentRoute 作为 currentLocation，仅在高级场景中覆盖。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.push: (NonNullable<AsamPageHeaderExpose["$router"]>)["push"] — 依赖声明
通过向历史栈添加记录，以编程方式导航到新 URL。
事件参数：(to: Parameters<Extract<NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["push"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["push"]>, (...args: never[]) => unknown>>
$router.replace: (NonNullable<AsamPageHeaderExpose["$router"]>)["replace"] — 依赖声明
通过替换历史栈中的当前记录，以编程方式导航到新 URL。
事件参数：(to: Parameters<Extract<NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["replace"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["replace"]>, (...args: never[]) => unknown>>
$router.back: () => void — 依赖声明
通过 history.back() 在可用时后退，等价于 router.go(-1)。
事件参数：(): void
$router.forward: () => void — 依赖声明
通过 history.forward() 在可用时前进，等价于 router.go(1)。
事件参数：(): void
$router.go: (delta: number) => void — 依赖声明
通过调用 history.go() 在历史记录中前进或后退。
事件参数：(delta: number): void
$router.beforeEach: (NonNullable<AsamPageHeaderExpose["$router"]>)["beforeEach"] — 依赖声明
添加每次导航之前执行的守卫，并返回移除此守卫的函数。
事件参数：(guard: Parameters<Extract<NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["beforeEach"]>, (...args: never[]) => unknown>>[0]): () => void
$router.beforeResolve: (NonNullable<AsamPageHeaderExpose["$router"]>)["beforeResolve"] — 依赖声明
添加导航确认之前执行的守卫，此时组件已获取且其他导航守卫已通过；返回移除此守卫的函数。
事件参数：(guard: Parameters<Extract<NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["beforeResolve"]>, (...args: never[]) => unknown>>[0]): () => void
$router.afterEach: (NonNullable<AsamPageHeaderExpose["$router"]>)["afterEach"] — 依赖声明
添加每次导航结束后执行的钩子，并返回移除此钩子的函数。
事件参数：(guard: Parameters<Extract<NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["afterEach"]>, (...args: never[]) => unknown>>[0]): () => void
$router.onError: (NonNullable<AsamPageHeaderExpose["$router"]>)["onError"] — 依赖声明
添加导航期间未捕获错误的处理函数，涵盖同步和异步异常、守卫返回或传给 next 的错误，以及路由异步组件解析错误。
事件参数：(handler: Parameters<Extract<NonNullable<(NonNullable<AsamPageHeaderExpose["$router"]>)["onError"]>, (...args: never[]) => unknown>>[0]): () => void
$router.isReady: () => Promise<void> — 依赖声明
返回在初次导航完成后兑现的 Promise，此时关联的异步进入钩子与异步组件均已解析；导航已完成时立即兑现。可用于保持服务端与客户端渲染一致；服务端需手动推入初始位置，客户端从 URL 自动读取。
事件参数：(): Promise<void>
$router.install: (app: App) => void — 依赖声明
由 app.use(router) 自动调用，用户不应手动调用；客户端调用时会触发初次导航。
事件参数：(app: App<any>): void

AsamPageHeaderInstance 公开类型视图

import type { ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions, ComponentOptionsMixin, GlobalComponents, GlobalDirectives, WatchOptions, WatchStopHandle, ShallowRef, App } from 'vue';
import type { AsamPageHeaderInstance, AsamPageHeaderExpose, AsamTableColumnExpose, AsamPageHeaderProps, AsamPageHeaderSlots } from '@asam-ui/ui';

type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;

// AsamPageHeaderInstance
type PublicContract = {
	"$": AsamPageHeaderExpose["$"];
	"$data": AsamTableColumnExpose;
	"$props": AsamPageHeaderProps;
	"$attrs": AsamPageHeaderExpose["$attrs"];
	"$refs": AsamPageHeaderExpose["$refs"];
	"$slots": AsamPageHeaderSlots;
	"$root": ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
	"$parent": ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
	"$host": Element | null;
	"$emit": (event: "back") => void;
	"$el": any;
	"$options": (AsamPageHeaderInstance)["$options"];
	"$forceUpdate": () => void;
	"$nextTick": (AsamPageHeaderInstance)["$nextTick"];
	"$watch": (AsamPageHeaderInstance)["$watch"];
	readonly "content": string;
	readonly "icon": AsamPageHeaderExpose["icon"];
	readonly "title"?: string | undefined;
	readonly "onBack"?: (() => any) | undefined;
	"$route": AsamPageHeaderExpose["$route"];
	"$router": AsamPageHeaderExpose["$router"];
};

作用域插槽保留上游实例契约。

参数与事件说明

`breadcrumb`

必填：否；声明来源：上游声明。

breadcrumb 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(props: AsamTableColumnExpose): any

`icon`

必填：否；声明来源：上游声明。

icon 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(props: AsamTableColumnExpose): any

`title`

必填：否；声明来源：上游声明。

title 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(props: AsamTableColumnExpose): any

`content`

必填：否；声明来源：上游声明。

content 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(props: AsamTableColumnExpose): any

`extra`

必填：否；声明来源：上游声明。

extra 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(props: AsamTableColumnExpose): any

`default`

必填：否；声明来源：上游声明。

default 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(props: AsamTableColumnExpose): any

AsamPageHeaderSlots 公开类型视图

import type { AsamPageHeaderSlots, AsamPageHeaderExpose, AsamTableColumnExpose } from '@asam-ui/ui';

// AsamPageHeaderSlots
type PublicContract = {
	"breadcrumb"?: (AsamPageHeaderSlots)["breadcrumb"];
	"icon"?: (AsamPageHeaderSlots)["icon"];
	"title"?: (AsamPageHeaderSlots)["title"];
	"content"?: (AsamPageHeaderSlots)["content"];
	"extra"?: (AsamPageHeaderSlots)["extra"];
	"default"?: (AsamPageHeaderSlots)["default"];
	readonly [key: string]: import("vue").Slot<any> | undefined;
};

参数与事件说明

`back`

必填：是；声明来源：上游声明。

back 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(): boolean

AsamPageHeaderEmits 公开类型视图

import type { AsamPageHeaderEmits } from '@asam-ui/ui';

// AsamPageHeaderEmits
type PublicContract = {
	"back": () => boolean;
};

参数与事件说明

`content`

必填：否；声明来源：上游声明。

默认值与来源

未知 / 未声明

固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）

`title`

必填：否；声明来源：上游声明。

`icon`

必填：否；声明来源：上游声明。

icon 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(props: any, ctx: Parameters<Extract<NonNullable<(AsamPageHeaderPropsPublic)["icon"]>, (...args: never[]) => unknown>>[1]): any

icon.__isFragment: undefined — 依赖声明
icon.__isTeleport: undefined — 依赖声明
icon.__isSuspense: undefined — 依赖声明

默认值与来源

未知 / 未声明

固定上游源码默认表达式：() => Back（2.14.7；源码事实，未作为 ASAM 运行实测）

AsamPageHeaderPropsPublic 公开类型视图

import type { AsamPageHeaderPropsPublic, AsamPageHeaderProps, AsamPageHeaderExpose } from '@asam-ui/ui';

type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;

// AsamPageHeaderPropsPublic
type PublicContract = {
	readonly "content"?: string | undefined;
	readonly "title"?: string | undefined;
	readonly "icon"?: (AsamPageHeaderPropsPublic)["icon"];
};

页头导航 AsamPageHeader

使用场景 ​

基础用法与状态 ​

基础用法与状态

使用约定 ​

完整使用场景 ​

完整示例 ​

完整示例

基础用法 ​

基础用法

自定义图标 ​

自定义图标

无图标 ​

无图标

面包屑导航 ​

面包屑导航

额外操作部分 ​

额外操作部分

主要内容 ​

主要内容

API

属性 AsamPageHeaderProps

实例方法与状态 AsamPageHeaderExpose

类型 AsamPageHeaderInstance

插槽 AsamPageHeaderSlots

事件 AsamPageHeaderEmits

类型 AsamPageHeaderPropsPublic

关联组件

参数与事件说明

icon

默认值与来源

title

默认值与来源

content

默认值与来源

onBack

key

ref

ref_for

ref_key

onVnodeBeforeMount

onVnodeMounted

onVnodeBeforeUpdate

onVnodeUpdated

onVnodeBeforeUnmount

onVnodeUnmounted

class

style

参数与事件说明

$

$data

$props

$attrs

$refs

$slots

$root

$parent

$host

$emit

$el

$options

$forceUpdate

$nextTick

$watch

content

icon

title

onBack

$route

$router

参数与事件说明

$

$data

$props

$attrs

$refs

$slots

$root

$parent

$host

使用场景

基础用法与状态

使用约定

完整使用场景

完整示例

基础用法

自定义图标

无图标

面包屑导航

额外操作部分

主要内容

属性 `AsamPageHeaderProps`

实例方法与状态 `AsamPageHeaderExpose`

类型 `AsamPageHeaderInstance`

插槽 `AsamPageHeaderSlots`

事件 `AsamPageHeaderEmits`

类型 `AsamPageHeaderPropsPublic`

`icon`

`title`

`content`

`onBack`

`key`

`ref`

`ref_for`

`ref_key`

`onVnodeBeforeMount`

`onVnodeMounted`

`onVnodeBeforeUpdate`

`onVnodeUpdated`

`onVnodeBeforeUnmount`

`onVnodeUnmounted`

`class`

`style`

`$`

`$data`

`$props`

`$attrs`

`$refs`

`$slots`

`$root`

`$parent`

`$host`

`$emit`

`$el`

`$options`

`$forceUpdate`

`$nextTick`

`$watch`

`content`

`icon`

`title`

`onBack`

`$route`

`$router`

`$`

`$data`

`$props`

`$attrs`

`$refs`

`$slots`

`$root`

`$parent`

`$host`

`$emit`

`$el`

`$options`

`$forceUpdate`

`$nextTick`

`$watch`

`content`

`icon`

`title`

`onBack`

`$route`

`$router`

`breadcrumb`

`icon`

`title`

`content`

`extra`