vue-router是vue的一个插件，用来提供路由功能。通过路由的改变可以动态加载组件，达到开发单页面程序的目的。
可以使用cdn在线导入在线资源，也可以使用npm模块的方式安装vue-router，现阶段我们入门学习的使用cdn。。
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.3/vue-router.min.js"></script>基本应用分为四部
组件定义路由定义组件注册模板内容例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.3/vue-router.min.js"></script> <script> window.onload = function() { //1.组件定义 var student = { template: ` <div > <h1>student</h1> </div>` }; var teacher = { template: ` <div > <h1>teacher</h1> </div>` }; var user = { template: ` <div > <h1>user</h1> </div>` }; //2.定义路由 var router = new VueRouter({ routes: [{ path: '/student', //定义路径 component: student, //这里写的是上面已经定义好的组件名称 }, { path: '/teacher', name: 'teacer', component: teacher, }, { path: '/user', component: user, } ] }); //3.组件注册 new Vue({ el: "#app", router, //在组件中注册上面已经定义的路由 data() { return { student: { path: '/student' } } }, methods: {}, }) } </script> </head> <body> <!-- 4.在模板中写入内容 --> <div id="app"> <h1>点击链接跳转界面</h1> <router-link :to="student">跳转到学生</router-link> <router-link to="/teacher">跳转到教师</router-link> <router-link to="/user">跳转到用户</router-link> <!-- 定义一个用来装路由界面的容器 --> <div id="content"> <router-view></router-view> </div> </div> </body> </html>在跳转时可以使用 router-link to="（路由地址）"跳转
<router-link to="/teacher">跳转到教师</router-link>也可以使用 router-link :to="（在data中定义的名字）"跳转
<router-link :to="student">跳转到学生</router-link>这时我们需要在对应的vue组件data中声明路由地址
new Vue({ el: "#app", router, //在组件中注册上面已经定义的路由 data() { return { student: { path: '/student' } } }, methods: {}, }) }