什么是路由

路由这个概念最先是后端出现的。通过服务器渲染，直接返回页面。
其响应过程是这样的

1. 浏览器发出请求
2. 服务器监听到80端口（或443）有请求过来，并解析url路径
3. 根据服务器的路由配置，返回相应信息
4. 浏览器根据数据包的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
})