vue3.x教程：路由-编程式导航（router.push）-马育民老师

# 提出问题

改造 [vue3.x教程：路由第一个案例（RouterLink、RouterView）](https://www.malaoshi.top/show_1GW3mL39vLtB.html "vue3.x教程：路由第一个案例（RouterLink、RouterView）") 中的例子，点击 红框中的 **按钮** `学生管理`、`教师管理`，实现跳转页面功能，如下图：

[![](https://www.malaoshi.top/upload/pic/vue/Snipaste_2022-02-12_22-58-24.png)](https://www.malaoshi.top/upload/pic/vue/Snipaste_2022-02-12_22-58-24.png)

### 注意

由于 是 **按钮** ，不是 超链接 `<a>` 标签，所以不能用 `<router-link>`

### 提示

在vue2中，**不能点击两次，否则报错**。vue3编程式导航没有此bug

# 解决

通过 **编程式导航** 实现

**提示：**相当于 `<router-link>`

### 方式一：传入字符串-路由path

```
router.push("路由path值")
```

### 方式二：传入对象-路由path

```
router.push({
  path:"路由path值"
})
```

### 方式三：传入对象-路由name

```
router.push({
  name:"路由name值"
})
```

# 代码

[![](/upload/0/0/1IX3Gi469awu.png)](/upload/0/0/1IX3Gi469awu.png)

### 修改 App.vue 文件

引入：

```
import { RouterView, useRouter } from 'vue-router'
```

创建对象：

```
// 本质是hooks
const router = useRouter()
```

定义函数：

```
function showStudent(){
  router.push("/student") //关键：传入 路由path
}

function showTeacher(){
  router.push({ //关键：传入对象，包含 路由path
	path:"/teacher"
  })
}
```

### 完整代码

```
<template>
  <div id="app">
    <h2>一级菜单</h2>
    <button @click="showStudent">学生管理</button>    
    <button @click="showTeacher">教师管理</button>
    <br>
    <router-view></router-view>
  </div>
</template>
<script lang="ts" setup>
import { RouterView, useRouter } from 'vue-router'

// 本质是hooks
const router = useRouter()

function showStudent(){
  router.push("/student") //关键：传入 路由path
}

原文出处：http://www.malaoshi.top/show_1GW3mf11OtOI.html