前端路由简介以及vue-router实现原理

后端路由简介

路由这个概念最早是后端出现的。在之前用模板引擎开发页面时，常常会看到这样

http://www.xxx.com/login

大体流程能够当作这样：

1. 浏览器发出请求
2. 服务器监听到80端口（或443）有请求过来，并解析url路径
3. 根据服务器的路由配置，返回相应信息（能够是 html 字串，也能够是 json 数据，图片等）
4. 浏览器根据数据包的 Content-Type 来决定如何解析数据

简单来讲路由就是用来跟后端服务器进行交互的一种方式，经过不一样的路径，来请求不一样的资源，请求不一样的页面是路由的其中一种功能。

前端路由

1. hash 模式

随着 ajax 的流行，异步数据请求交互运行在不刷新浏览器的状况下进行。而异步交互体验的更高级版本就是 SPA —— 单页应用。单页应用不只仅是在页面交互是无刷新的，连页面跳转都是无刷新的，为了实现单页应用，因此就有了前端路由。
相似于服务端路由，前端路由实现起来其实也很简单，就是匹配不一样的 url 路径，进行解析，而后动态的渲染出区域 html 内容。可是这样存在一个问题，就是 url 每次变化的时候，都会形成页面的刷新。那解决问题的思路即是在改变 url 的状况下，保证页面的不刷新。在 2014 年以前，你们是经过 hash 来实现路由，url hash 就是相似于：

http://www.xxx.com/#/login

这种 #。后面 hash 值的变化，并不会致使浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新页面。另外每次 hash 值的变化，还会触发hashchange 这个事件，经过这个事件咱们就能够知道 hash 值发生了哪些变化。而后咱们即可以监听hashchange来实现更新页面部份内容的操做：

function matchAndUpdate () {
   // todo 匹配 hash 作 dom 更新操做
}

window.addEventListener('hashchange', matchAndUpdate)

2. history 模式

14年后，由于HTML5标准发布。多了两个 API，pushState 和 replaceState，经过这两个 API 能够改变 url 地址且不会发送请求。同时还有 popstate 事件。经过这些就能用另外一种方式来实现前端路由了，但原理都是跟 hash 实现相同的。用了 HTML5 的实现，单页路由的 url 就不会多出一个#，变得更加美观。但由于没有 # 号，因此当用户刷新页面之类的操做时，浏览器仍是会给服务器发送请求。为了不出现这种状况，因此这个实现须要服务器的支持，须要把全部路由都重定向到根页面。

function matchAndUpdate () {
   // todo 匹配路径 作 dom 更新操做
}

window.addEventListener('popstate', matchAndUpdate)

Vue router 实现

咱们来看一下vue-router是如何定义的：

import VueRouter from 'vue-router'
Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

new Vue({
  router
  ...
})

能够看出来vue-router是经过 Vue.use的方法被注入进 Vue 实例中，在使用的时候咱们须要全局用到 vue-router的router-view和router-link组件，以及this.$router/$route这样的实例对象。那么是如何实现这些操做的呢？下面我会分几个章节详细的带你进入vue-router的世界。(阅读源码是有点枯燥，可是带着问题去了解，就感受颇有意思。若是你对 vue-router 的实现机制也存在一些疑问，能够一块儿探讨交流)

vue-router 实现 -- install

vue-router 实现 -- new VueRouter(options)

vue-router 实现 -- HashHistory

未完待续...