vue3 锚点页面跳转

Vue3中，可以使用`vue-router`实现锚点页面跳转。具体步骤如下：

1. 在路由配置中添加`props: true`，以便在组件中获取动态路由参数。

const routes = [
  {
    path: '/page/:anchor',
    name: 'Page',
    component: Page,
    props: true // 添加 props: true
  }
]

2. 在组件中获取参数，并使用`$nextTick`使页面渲染完成后再跳转到锚点位置。

<template>
  <div>
    <h1>Page</h1>
    <<div ref="anchor1">Anchor 1</div>
    <<div ref="anchor2">Anchor 2</div>
  </div>
</template>

<script>
export default {
  props: ['anchor'],
  mounted() {
    this.$nextTick(() => {
      // 根据锚点参数跳转到对应的锚点位置
      if (this.anchor === 'anchor1') {
        this.$refs.anchor1.scrollIntoView()
      } else if (this.anchor === 'anchor2') {
        this.$refs.anchor2.scrollIntoView()
      }
    })
  }
}
</script>

3. 在页面中添加锚点链接，链接地址为动态路由地址。

<template>
  <div>
    <h2>Jump to:</h2>
    <ul>
      <li><router-link :to="{ name: 'Page', params: { anchor: 'anchor1' } }">Anchor 1</router-link></li>
      <li><router-link :to="{ name: 'Page', params: { anchor: 'anchor2' } }">Anchor 2</router-link></li>
    </ul>
  </div>
</template>

这样，当用户点击锚点链接时，会跳转到对应的页面，并滚动到对应的锚点位置。