vue 点击按钮跳转

### 实现 Vue 中点击按钮后页面跳转

为了实现在 Vue 应用中点击按钮触发页面跳转功能，需确保项目已集成 `vue-router`。具体实现方式如下：

#### 绑定按钮点击事件至处理函数

HTML 结构部分，在模板内定义按钮并为其指定点击事件处理器。

<template>
  <button @click="navigateToIndex">前往 Index 页面</button>
</template>

此段代码展示了如何将按钮的点击行为关联到名为 `navigateToIndex` 的方法上[^1]。

#### 编写导航逻辑的方法

接着在脚本区域编写响应上述点击事件的具体操作——即更改当前路由地址来完成页面切换动作。

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

function navigateToIndex() {
    // 使用 push 方法添加新记录到历史栈中, 用户可返回前一页
    router.push({ name: 'index' }); 

    // 或者使用 replace 不保留当前页的历史条目
    // router.replace({ path: '/index' });
}
</script>

这里利用了来自 vue-router 提供的编程式导航接口 `$router.push()` 和 `$router.replace()` 来执行实际的页面转向工作[^2]。

对于更复杂的场景下可能还会涉及到参数传递等问题，则可以根据需求调整传入对象中的配置项以满足特定业务要求。