当前位置：首页 > VUE

vue实现按钮跳转页面

2026-02-23 07:39:13VUE

Vue 实现按钮跳转页面

在 Vue 中实现按钮跳转页面可以通过以下几种方式实现，具体取决于项目使用的路由方式（Vue Router 或原生跳转）以及需求场景。

使用 Vue Router 的 `router-link` 组件

router-link 是 Vue Router 提供的组件，用于声明式导航，适合直接替换 <a> 标签的场景。

vue实现按钮跳转页面

<template>
  <router-link to="/target-page">
    <button>跳转到目标页</button>
  </router-link>
</template>

通过编程式导航跳转

在按钮的 @click 事件中调用 this.$router.push() 方法，适合需要逻辑判断后跳转的场景。

vue实现按钮跳转页面

<template>
  <button @click="goToPage">跳转到目标页</button>
</template>

<script>
export default {
  methods: {
    goToPage() {
      this.$router.push('/target-page');
      // 或使用命名路由
      // this.$router.push({ name: 'targetPage' });
    }
  }
}
</script>

使用原生 `window.location` 跳转

如果未使用 Vue Router，可以通过原生方式跳转。

<template>
  <button @click="goToPage">跳转到目标页</button>
</template>

<script>
export default {
  methods: {
    goToPage() {
      window.location.href = '/target-page.html';
    }
  }
}
</script>

动态传递参数

如果需要传递参数（如 ID），可以通过路由的 params 或 query 实现。

<template>
  <button @click="goToDetail(123)">查看详情</button>
</template>

<script>
export default {
  methods: {
    goToDetail(id) {
      this.$router.push({ path: `/detail/${id}` });
      // 或使用 query
      // this.$router.push({ path: '/detail', query: { id } });
    }
  }
}
</script>