vue实现按钮跳转页面

Vue 实现按钮跳转页面

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

使用 Vue Router 的 router-link 组件

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

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

通过编程式导航跳转

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

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

注意事项

• 使用 Vue Router 前需确保已安装并配置路由（vue-router 包）。
• 编程式导航支持路径（path）或命名路由（name），推荐后者以降低硬编码风险。
• 动态参数需在路由配置中定义对应字段（如 /detail/:id）。