用插槽实现官网级锚点导航的核心是解耦导航结构与内容逻辑：左侧大纲、顶部标签、右侧浮动索引通过具名插槽动态注入，共用统一的滚动监听、跳转与激活状态逻辑，兼顾复用性、可维护性及seo/可访问性要求。
用插槽实现官网级文档锚点导航，关键不是堆功能，而是把“导航结构”和“内容逻辑”解耦。锚点跳转本身靠原生 id + href="#xxx" 就能完成，插槽的作用是让这个导航栏组件能被不同文档页复用——左栏目录、顶部标签、右侧浮动索引，全靠插槽动态注入。
锚点导航的核心结构拆解
典型官网文档页（如 Vue 官网、Element Plus 文档）通常包含三类导航区域：
- 左侧大纲导航：固定滚动，显示当前文档所有 h2/h3 标题，高亮当前可视区块
- 顶部标签栏：用于切换不同文档模块（如“安装”、“快速上手”、“API”）
- 右侧浮动索引：随页面滚动，始终显示当前章节下的子标题，支持点击跳转
这三部分样式和行为各异，但共用同一套锚点逻辑（id 值、滚动监听、激活判断）。插槽让它们能在同一个 DocNav 组件里被分别定义、独立维护。
用具名插槽组织导航区域
在 DocNav.vue 中，不写死任何导航项，只预留语义化插槽：
<template><nav class="doc-nav"><aside class="nav-aside"><slot name="aside"></slot></aside><header class="nav-header"><slot name="header"></slot></header><div class="nav-floating"><slot name="floating"></slot></div> </nav></template>
每个插槽对应一个导航区域。父组件（如 GuidePage.vue）按需填充：
<docnav><template><docoutline :headings="headings"></docoutline></template><template><doctabs :tabs="tabs"></doctabs></template><template><docindex :currentsection="currentSection"></docindex></template></docnav>
这样，DocNav 只负责布局与容器逻辑（比如统一处理滚动节流、锚点平滑跳转），具体内容由子组件或内联模板决定，复用性直接拉满。
锚点跳转与滚动同步的共用逻辑封装
插槽解决的是“内容可替换”，但跳转和高亮需要跨插槽协同。建议把这部分抽成组合式函数（Vue 3）或 mixin（Vue 2）：
- 监听
window.scroll，遍历所有带id的标题元素，计算可视区域匹配项 - 提供
scrollToAnchor(id)方法，内部调用element.scrollIntoView({ behavior: 'smooth' }) - 导出
activeId响应式变量，供各插槽内的组件（如DocOutline）自动绑定class="active"
这个逻辑只写一次，在 DocNav 内部 use，所有通过插槽注入的子组件都能响应式联动，无需重复监听或手动同步。
适配多端与 SEO 的细节提醒
官网文档对可访问性和 SEO 敏感，插槽使用时要注意：
- 所有锚点
id必须唯一且语义清晰（如id="props-table"而非id="section-3"） - 插槽内容中避免纯图标按钮，添加
aria-label或<span class="visually-hidden">返回顶部</span> - 服务端渲染（SSR）场景下，确保插槽内容在首屏 HTML 中已存在，否则搜索引擎可能抓不到导航结构
- 移动端需为
nav-aside添加overflow-y: auto和最小高度，防止内容截断
插槽不是万能胶，它是让“结构稳定”和“内容灵活”真正落地的接口。锚点导航复用的本质，是把变的部分（标题文本、层级、分组方式）交给插槽，把不变的部分（滚动定位、状态同步、键盘导航支持）收归组件核心。
