Vue Router 实现单页内锚点滚动与 URL 同步

本文介绍如何在 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：

✅ 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 中添加滚动监听：

✅ 最终效果

• 点击导航 → 平滑滚动至对应区块，URL 变为 /#form
• 手动滚动 → 当前区块进入视口时，URL 自动更新为对应 hash
• 浏览器前进/后退 → 正常响应 hash 变化并滚动
• SEO 友好：id 属性天然支持搜索引擎锚点索引

❌ 常见误区提醒

• 不要滥用 router-view 多命名： 适用于 并行视图（如侧边栏+主内容），非垂直滚动场景。
• 不要嵌套路由配相同 path：如多个子路由都设 path: '/'，会导致匹配冲突，Router 无法区分。
• 避免 window.scrollTo() 与 scroll-behavior: smooth 混用：前者可能绕过 CSS 平滑效果，优先用原生锚点 + scrollBehavior 配置。

此方案轻量、标准、可维护，完美复刻 Vue Router 官网文档页 的交互体验——它本身正是基于 hash 锚点 + scroll-behavior: smooth 实现的。