面试题：如何使用 Vue Router 的 hash 模式实现锚点？

在 Vue Router 中，默认使用的是 hash 模式（URL 中以 # 开头的路径）。在 hash 模式下，可以通过以下方式实现锚点功能：

1. 使用原生 HTML 锚点

在 Vue 组件中，可以直接使用 HTML 的 <a> 标签和 id 属性实现锚点跳转。

示例：

<template>
  <div>
    <a href="#section1">跳转到 Section 1</a>
    <a href="#section2">跳转到 Section 2</a>

    <div id="section1" style="height: 1000px; background: lightblue;">
      Section 1
    </div>
    <div id="section2" style="height: 1000px; background: lightgreen;">
      Section 2
    </div>
  </div>
</template>

说明：

点击链接时，页面会滚动到对应 id 的元素位置。
URL 会变为 http://example.com/#section1 或 http://example.com/#section2。

2. 使用 Vue Router 的 `router.push` 方法

如果需要通过编程方式实现锚点跳转，可以使用 router.push 方法。

示例：

<template>
  <div>
    <button @click="goToSection('section1')">跳转到 Section 1</button>
    <button @click="goToSection('section2')">跳转到 Section 2</button>

    <div id="section1" style="height: 1000px; background: lightblue;">
      Section 1
    </div>
    <div id="section2" style="height: 1000px; background: lightgreen;">
      Section 2
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    goToSection(sectionId) {
      // 使用 router.push 跳转到锚点
      this.$router.push({ hash: `#${sectionId}` });
    },
  },
};
</script>

说明：

router.push 方法会将 URL 更新为 http://example.com/#section1 或 http://example.com/#section2。
页面会自动滚动到对应 id 的元素位置。

3. 结合 `scrollBehavior` 实现平滑滚动

Vue Router 提供了 scrollBehavior 选项，可以自定义路由切换时的滚动行为。可以通过它实现平滑滚动到锚点。

示例：

const router = new VueRouter({
  mode: 'hash',
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
  ],
  scrollBehavior(to, from, savedPosition) {
    if (to.hash) {
      // 如果有 hash，滚动到对应元素
      return { selector: to.hash, behavior: 'smooth' };
    } else if (savedPosition) {
      // 如果有保存的位置，恢复到该位置
      return savedPosition;
    } else {
      // 否则滚动到顶部
      return { x: 0, y: 0 };
    }
  },
});

说明：

scrollBehavior 会在路由切换时触发。
如果 URL 中包含 hash（如 #section1），页面会平滑滚动到对应元素。

4. 处理动态内容中的锚点

如果锚点目标元素是动态生成的（例如通过 v-for 渲染的列表），需要确保元素已经渲染到 DOM 中后再执行跳转。

示例：

<template>
  <div>
    <button @click="goToSection('section3')">跳转到 Section 3</button>

    <div v-for="item in items" :key="item.id" :id="`section${item.id}`" style="height: 1000px; background: lightyellow;">
      Section {{ item.id }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [{ id: 1 }, { id: 2 }, { id: 3 }],
    };
  },
  methods: {
    goToSection(sectionId) {
      // 等待 DOM 更新后跳转
      this.$nextTick(() => {
        this.$router.push({ hash: `#${sectionId}` });
      });
    },
  },
};
</script>

说明：

使用 this.$nextTick 确保 DOM 更新完成后再执行跳转。

5. 处理嵌套路由中的锚点

如果锚点目标位于嵌套路由中，需要确保路由路径和 hash 都正确。

示例：

const router = new VueRouter({
  mode: 'hash',
  routes: [
    {
      path: '/parent',
      component: Parent,
      children: [
        { path: 'child', component: Child },
      ],
    },
  ],
});

在组件中跳转：

this.$router.push({ path: '/parent/child', hash: '#section1' });

总结

在 Vue Router 的 hash 模式下，可以通过以下方式实现锚点功能：

使用原生 HTML 锚点。
使用 router.push 方法编程式跳转。
结合 scrollBehavior 实现平滑滚动。
处理动态内容中的锚点。
处理嵌套路由中的锚点。

通过这些方法，可以灵活地实现页面内的锚点跳转，并提升用户体验。

THE END