在Vue中实现点击跳转页面，通常有两种常见的方式：使用<router-link>组件和编程式导航。下面分别介绍这两种方法。

使用<router-link>组件

<router-link>是Vue Router提供的组件，用于创建链接，激活时可以自动添加CSS类，处理活性状态，并且支持 <a> 标签的全部特性。

示例代码：

<template>
  <div>
    <!-- 方式一：直接使用to属性指定路由路径 -->
    <router-link to="/targetPage">跳转到目标页面</router-link>

    <!-- 方式二：使用tag属性改变元素类型，例如使用button -->
    <router-link to="/targetPage" tag="button">点击跳转</router-link>
  </div>
</template>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
编程式导航

如果你需要在某个事件（如按钮点击）中进行页面跳转，可以使用Vue Router的实例方法this.$router.push()或this.$router.replace()。

示例代码：

<template>
  <div>
    <button @click="navigateToTargetPage">点击跳转</button>
  </div>
</template>

<script>
export default {
  methods: {
    navigateToTargetPage() {
      // 使用push方法进行跳转，会在浏览历史中添加记录
      this.$router.push('/targetPage');

      // 或者使用replace方法，不会添加新的历史记录，替换当前的历史记录
      // this.$router.replace('/targetPage');
    }
  }
}
</script>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.

确保在使用以上方法之前，你已经在Vue项目中安装并配置了Vue Router。如果还没有配置，需要按照Vue Router的官方文档指引进行设置。