说明

改造 vue3.x教程：路由第一个案例（RouterLink、RouterView） 中的例子，点击 红框中的 按钮 学生管理、教师管理，实现跳转页面功能，如下图：

难点

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

bug

这种实现方式，不能点击两次，否则报错，解决详见 链接

解决

通过 编程式导航 实现

提示：相当于 <router-link>

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

this.$router.push("路由path值")

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

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

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

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

代码

修改 App.vue 文件

<template>
  <div id="app">
    <h2>一级菜单</h2>
    <!-- <router-link active-class="action" to="/student">学生管理</router-link>&nbsp;&nbsp;&nbsp;&nbsp; -->
    <!-- <router-link active-class="action" to="/teacher">教师管理</router-link><br> -->
    <button @click="showStudent">学生管理</button>&nbsp;&nbsp;&nbsp;&nbsp;
    <button @click="showTeacher">教师管理</button>
    <br>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {

  },
  methods:{
    showStudent:function(){
      this.$router.push("/student") //关键：传入 路由path
    },
    showTeacher:function(){
      this.$router.push({ //关键：传入对象，包含 路由path
        path:"/teacher"
      })
    },
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.action{
  color: red;
}
a{
  color: blue;
}
</style>

原文出处：/show_1IX2lbYBe7Mj.html