什么是路由
路由这个概念最先是后端出现的。通过服务器渲染，直接返回页面。
其响应过程是这样的
- 浏览器发出请求
- 服务器监听到80端口（或443）有请求过来，并解析url路径
- 根据服务器的路由配置，返回相应信息
- 浏览器根据数据包的
Content-Type来决定如何解析数据
路由的作用
路由就是用来跟服务器进行交互的一种方式，通过不同的路径，来请求不同的资源。
Vue-router
原理就是检测 url 的变化，截获 url 地址，然后解析来匹配路由规则。
但是每次改变url都会去刷新页面，所以通过 hash 来实现路由。hash 值的变化，并不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新页面。另外每次 hash 值的变化，还会触发 hashchange 这个事件，通过这个事件我们就可以知道 hash 值发生了哪些变化。
<div id="app">
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
<router-view><router-view>
</div>
router-link其实就是一个不会页面跳转的a标签，会在url上加上hash
类似
http://192.168.1.100:8081/src/lizi.html#/foo
#后面就是hash
router-view标签会根据路由的配置把相应的组件给渲染出来，并替换掉router-view标签。
<script src="./vendor/vue.min.js"></script>
<script src="./vendor/vue-router.min.js"></script>
首先在引入vue后再引入vue-router
//定义两个组件对象
let Foo = { template: '<div>foo</div>'}
let Bar = { template: '<div>bar</div>'}
//定义路由
let routes = [{ path: "/foo", component: Foo}, { path: "/bar", component: Bar}]
//创建 router 实例，然后传 `routes` 配置
let router = new VueRouter({
routes: routes
})
//创建和挂载根实例，通过 router 配置参数注入路由
let app = new Vue({
el: "#app",
router: router
})
