在 Vue 项目中，如果使用 Vue Router 的 hash 模式，如何实现页内锚点跳转？请说明其原理和实现方式。

回答思路

1. 【回答框架 1】hash 模式下，URL 的 hash 部分（# 之后的内容）被 Vue Router 用于路由匹配，因此无法直接使用传统 id 锚点。核心思路是将锚点位置通过路由参数或 query 传递，并在路由跳转后的回调中获取该参数，手动滚动到对应元素。
2. 【回答框架 2】实现步骤：1）在路由配置中为目标页面添加可选的 query 参数，如 ?anchor=section1；2）在目标组件的 mounted 钩子中读取 route.query.anchor，使用 document.getElementById 获取元素并调用 scrollIntoView 或设置 scrollTop。
3. 【回答框架 3】另一种常见实现是监听路由变化，在 hash 模式下每次导航后手动处理滚动位置，因为浏览器默认不会处理带 query 的 hash 变化。可使用 Vue Router 的 afterEach 钩子，根据 to.query.anchor 执行滚动。
4. 【回答框架 4】若需要平滑滚动，可结合 CSS 的 scroll-behavior: smooth 或使用 scrollIntoView 的 behavior 选项，但需注意兼容性。
5. 【回答框架 5】直接使用 <a href='#id'> 在 hash 路由下会干扰路由跳转，应避免；推荐始终通过编程式导航或 router-link 携带 query 来实现锚点。
6. 【关键点 1】hash 模式下 hash 被路由占用，锚点需通过 query 参数传递并手动滚动。
7. 【关键点 2】在目标组件 mounted 或路由 afterEach 中读取 query 锚点并执行 scrollIntoView。
8. 【关键点 3】避免使用原生 <a> 锚点，防止与路由冲突。
9. 【易错点 1】直接使用原生 id 锚点会被 Vue Router 拦截，无法生效。
10. 【易错点 2】在异步加载数据后再滚动，否则目标元素可能还不存在。
11. 【易错点 3】hash 模式下使用 afterEach 时需判断当前路由和 query，避免重复滚动。