引入js

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.4.9"></script>

导入 vue-router，为全局window对象挂载 VueRouter 构造函数

html

添加 div

<div id="app">

</div>

添加路由链接

• 使用 <router-link> 组件来导航，默认会被渲染成一个 <a> 标签

• to 属性渲染为 href 属性，to 属性值 渲染为 #开头的hash地址

在 <div id="app"> 中添加下面代码：

<router-link to="/student">学生管理</router-link>
<router-link to="/teacher">教师管理</router-link>

添加路由出口

路由匹配到的组件将渲染在这里

在 <div id="app"> 中添加下面代码：

<router-view></router-view>

js

定义组件

var std = { template: '<div>学生管理界面</div>' }
var tch = { template: '<div>教室管理界面</div>' }

定义路由

每个路由应该映射一个组件

path 属性值 对应 <router-link to=""> 中的 to 属性值
component 属性值 是组件

var router = new VueRouter({
  routes : [
  { path: '/student', component: std },
  { path: '/teacher', component: tch }
]
})

定义vue对象

假如路由

var app = new Vue({
    el: '#app',
    data: {
    },
    router:router
})

完整代码

<div id="app" >
    <router-link to="/student">学生管理</router-link>
    <router-link to="/teacher">教师管理</router-link>

    <router-view></router-view>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.4.9"></script>

<script>


    var std = { template: '<div>学生管理界面</div>' }
    var tch = { template: '<div>教室管理界面</div>' }
    var router = new VueRouter({
        routes : [
            { path: '/student', component: std },
            { path: '/teacher', component: tch }
        ]
    })

    var app = new Vue({
        el: '#app',
        data: {
        },
        router:router
    })
</script>

原文出处：/show_1IXOAWouRuO.html