vue3怎么实现页内跳转

在 Vue3 中实现页内跳转，可以使用常规的 HTML 锚点链接方式来实现。具体步骤如下：

1. 在需要跳转到的位置，使用 HTML 的 id 属性来设置一个锚点，例如：

<div id="section1">
  <!-- 这里是需要跳转到的位置 -->
</div>

2. 在需要触发跳转的位置，使用 HTML 的 a 标签来设置一个链接，链接的 href 属性为锚点的 id 值，例如：

<a href="#section1">跳转到 section1</a>

3. 当用户点击这个链接时，浏览器会自动跳转到 id 为 section1 的位置。

在 Vue3 中，由于使用了 Virtual DOM 技术，如果需要通过 JavaScript 来实现页面滚动跳转，可以使用 ref 和 $el 属性来获取对应的 DOM 元素，然后使用 scrollTo 方法来实现滚动。例如：

<template>
  <div>
    <div ref="section1">
      <!-- 这里是需要跳转到的位置 -->
    </div>
    <a @click="scrollToSection1">跳转到 section1</a>
  </div>
</template>

<script>
export default {
  methods: {
    scrollToSection1() {
      this.$refs.section1.$el.scrollIntoView();
    },
  },
};
</script>

这个例子中，使用 ref="section1" 来获取 DOM 元素，然后在 scrollToSection1 方法中使用 $el.scrollIntoView() 方法来实现滚动跳转。