提出问题
改造 vue3.x教程：路由第一个案例（RouterLink、RouterView） 中的例子，点击 红框中的 按钮 学生管理、教师管理，实现跳转页面功能，如下图：
注意
由于 是 按钮 ，不是 超链接 <a> 标签，所以不能用 <router-link>
提示
在vue2中，不能点击两次，否则报错。vue3编程式导航没有此bug
解决
通过 编程式导航 实现
提示：相当于 <router-link>
方式一：传入字符串-路由path
router.push("路由path值")
方式二：传入对象-路由path
router.push({
path:"路由path值"
})
方式三：传入对象-路由name
router.push({
name:"路由name值"
})
代码
修改 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
}
function showTeacher(){
router.push({ //关键：传入对象，包含 路由path
path:"/teacher"
})
}
</script>
<style>
#app {
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.action{
color: red;
}
a{
color: blue;
}
</style>