本文介绍如何在 vue 应用中结合原生 html 锚点与 vue router，实现点击菜单平滑滚动至页面指定区域、自动更新 url hash，并在滚动时动态同步当前 section 的 hash 值，兼顾语义化路由体验与性能。
在 Vue 单页应用中，若希望所有主内容（如 LandingPage、Form、About）保留在同一页面内，仅通过滚动定位而非传统路由跳转，不推荐强行用多 router-view 或嵌套路由模拟锚点行为——这违背 Vue Router 的设计初衷（用于组件级视图切换），且会导致路由配置冗余、URL 语义混乱、历史栈异常等问题。
✅ 正确思路是：以原生 HTML 锚点（id + href="#xxx"）为基础，辅以 Vue Router 的 hash 模式与滚动监听，实现「伪路由」的体验一致性。Vue Router 默认支持 hash 模式（如 /#about），我们可充分利用该特性，无需自定义 router-view 多命名或复杂嵌套。
✅ 推荐实现方案（Vue 3 + Vue Router 4）
1. 结构：语义化锚点 + 平滑滚动
在 App.vue 中定义导航与内容区块，每个区块设置唯一 id：
<template>
<nav class="navbar">
<router-link to="#landingPage" class="nav-item">首页</router-link>
<router-link to="#form" class="nav-item">表单</router-link>
<router-link to="#about" class="nav-item">关于</router-link>
</nav>
<main class="content">
<section id="landingPage" class="section">
<h2>欢迎来到首页</h2>
<p>这是首屏内容...</p>
</section>
<section id="form" class="section">
<h2>填写表单</h2>
<form @submit.prevent>
<input type="text" placeholder="姓名" />
<button type="submit">提交</button>
</form>
</section>
<section id="about" class="section">
<h2>关于我们</h2>
<p>团队介绍与愿景...</p>
</section>
</main>
</template>
<style>
/* 全局启用平滑滚动 */
* {
scroll-behavior: smooth;
}
.section {
min-height: 100vh;
padding: 4rem 2rem;
}
</style>✅ router-link 的 to="#xxx" 会自动触发浏览器原生锚点跳转，并更新 URL hash（如 /#about），同时被 Vue Router 正确捕获（需启用 hash 模式）。
2. 路由配置：精简、无嵌套、启用 hash 模式
// router/index.js
import { createRouter, createWebHashHistory } from 'vue-router'
const routes = [
{
path: '/',
name: 'Home',
component: () => import('@/views/HomeView.vue') // 你的主页面组件
}
]
const router = createRouter({
history: createWebHashHistory(), // ✅ 关键：使用 hash 模式
routes,
// 可选：滚动行为（配合 hash 锚点）
scrollBehavior(to, from, savedPosition) {
if (to.hash) {
return {
el: to.hash,
behavior: 'smooth'
}
}
return savedPosition || { top: 0 }
}
})
export default router⚠️ 注意：scrollBehavior 在 hash 跳转时会自动定位到对应 id 元素，无需手动 document.getElementById().scrollIntoView()。
立即学习“前端免费学习笔记（深入）”；
3. 滚动时自动更新 URL hash（进阶需求）
若需用户手动滚动后，URL 自动反映当前可见区块（如滚动到 #about 区域时 URL 变为 /#about），可在 HomeView.vue 中添加滚动监听：
<script setup>
import { onMounted, onUnmounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
const sections = ref(['landingPage', 'form', 'about'])
const observer = ref(null)
onMounted(() => {
const handleScroll = () => {
const scrollPos = window.scrollY + 100 // 偏移补偿，避免临界误判
const currentSection = sections.value.find(id => {
const el = document.getElementById(id)
if (!el) return false
const { offsetTop, offsetHeight } = el
return scrollPos >= offsetTop && scrollPos < offsetTop + offsetHeight
})
if (currentSection && `#${currentSection}` !== route.hash) {
router.replace({ hash: `#${currentSection}` })
}
}
window.addEventListener('scroll', handleScroll, { passive: true })
// 初始化匹配一次（防止刷新后 hash 不匹配）
handleScroll()
// 清理
onUnmounted(() => {
window.removeEventListener('scroll', handleScroll)
})
})
</script>✅ 最终效果
- 点击导航 → 平滑滚动至对应区块，URL 变为 /#form
- 手动滚动 → 当前区块进入视口时，URL 自动更新为对应 hash
- 浏览器前进/后退 → 正常响应 hash 变化并滚动
- SEO 友好：id 属性天然支持搜索引擎锚点索引
❌ 常见误区提醒
- 不要滥用 router-view 多命名：<router-view name="Form"> 适用于 并行视图（如侧边栏+主内容），非垂直滚动场景。
- 不要嵌套路由配相同 path：如多个子路由都设 path: '/'，会导致匹配冲突，Router 无法区分。
- 避免 window.scrollTo() 与 scroll-behavior: smooth 混用：前者可能绕过 CSS 平滑效果，优先用原生锚点 + scrollBehavior 配置。
此方案轻量、标准、可维护，完美复刻 Vue Router 官网文档页 的交互体验——它本身正是基于 hash 锚点 + scroll-behavior: smooth 实现的。
