vue 实现点击跳转页面

在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>

编程式导航

如果你需要在某个事件（如按钮点击）中进行页面跳转，可以使用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>

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