Vue Router是什么:

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌包,含的功能有:

1. 嵌套的路由/视图表
2. 模块化的、基于组件的路由配置
3. 路由参数、查询、通配符
4. 基于 Vue.js 过渡系统的视图过渡效果
5. 细粒度的导航控制
6. 带有自动激活的 CSS class 的链接
7. HTML5 历史模式或 hash 模式，在 IE9 中自动降级
8. 自定义的滚动条行为

用 Vue.js + Vue Router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 Vue Router 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。

引入必要的脚本 Vue.js 和Vue-Router.js

网址:   https://www.bootcdn.cn/

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

HTML

<div id="app">
            <h2>使用Vue-Router路由制作单页程序</h2>
        <div>
            <router-link to="stu">学生</router-link>
            <router-link to="tea">老师</router-link>
        </div>
        <div>
            <router-view></router-view>   
         </div>
    </div>

定义导航组件<router-link>，使用to属性定义要跳转的路径，<router-link>会渲染成a标签

<router-view> 渲染与路由匹配的组件内容，默认显示第一个路由匹配的组件

JavaScript

 //1.定义 (路由) 组件。
        //定义一个学生组件
        const Student={template:"<h3>一个学生</h3>"}
        //定义一个老师组件
        const Teacher={template:"<h3>一个老师</h3>"}

   //2.定义路由
  // 每个路由应该映射一个组件。 其中"component" 可以是通过 Vue.extend() 创建的组件构器，或者只是一个组件配置对象
        const routes = [{path: "/stu",component: Student}, {path: "/tea",component: Teacher}];
       
    //3.创建 router 实例，然后传 `routes` 配置你还可以传别的配置参数, 不过先这么简单吧。
        var router = new VueRouter({
                routes// (缩写) 相当于 routes: routes
                        })
      

属性routes：表示路由列表，注意：是routes不是routers

//4.创建和挂载根实例。记得要通过 router 配置参数注入路由,从而让整个应用都有路由功能
       const app = new Vue({
        el:"#app",
        router//等价于 router:router
      })

实用技巧：当属性名与值的名称相同，可以简写，只写属性名即可。例如： router:router  简写 router 即可

要注意，当 <router-link> 对应的路由匹配成功，将自动设置 class 属性值 .router-link-active。查看