vue route实现原理

后端路由

路由的概念最开始是由后端提出来的，在以前用模板引擎开发页面的时候，经常会看到这样

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年之前，大家是通过has来实现路由，url hash就类似于http://www.xxx.com/#/login

这种#后面hash值的变化并不会导致浏览器向服务器发送请求，也就不会刷新页面，另外每次hash值的变化，还会触发hashchange事件，通过这个事件我们就可以知道hash值发生了改变，然后我们便可以监听hashchange来实现更新页面部分内容的操作：

2.history模式

14年以后H5标准发布，多了两个API，pushState和replaceState，通过这两个api可以改变url地址且不会发送请求，同时还有popstate事件，通过这些就能够用另一种方式来实现前端路由，单原理都是跟hash实现相同，用了H5的实现单页面板路由的URL就不会多出来一个#,变得更加美观，但是因为没有了#，所以当用户刷新页面之类的操作的时候，浏览器还是会给服务器发送请求，为了避免出现这种情况，所以这个实现要拂去其端的支持，需要把所有路由都重定向到根页面

vue route的实现er

我们来看一下vue-route是如何定义的：

import Vueroute from 'vue-router'

Vue,use(Vueroute)

const router = new Vueroute({

          mode:'history',

         routes:[....]

})

new Vue({

            router

            .......

})

可以看出vue-router是通过Vue.use的方法被注入进去VUE实例中，在使用的时候我们需要全局用到vue-router的router-view和router-link组件，以及this.$router/$route这样的实例对象，那么是如何实现这些操作的呢？

经过上面的阐述，相信您已经对前端路由以及vue-router有了一些大致的了解。那么这里我们为了贯彻无解肥，我们来手把手撸一个下面这样的数据驱动的 router：

思路整理

首先是数据驱动，所以我们可以通过一个route对象来表述当前路由状态，比如：

current.route内存放当前路由的配置信息，所以我们只要监听current.route的变化来动态render页面即可。

接着我们需要监听不同的路由变化，做相应的处理，以及实现hash和history模式。

数据驱动

这里我们延用vue数据驱动模型，实现一个简单的数据劫持，并更新视图，首先定义我们的observer

再接着，我们需要定义Dep和Watcher:

到这里我们实现了一个简单的订阅-发布器，所以我们需要对current.route做数据劫持。一旦current.route更新，我们可以及时的更新当前页面：

恩....到这里，我们似乎已经完成了一个简单的响应式数据更新。其实render也就是动态的为页面指定区域渲染对应内容，这里只做一个简化版的render:

hash和histpry模式

接下来时hash和history模式的实现，这里我们可以沿用vue-router的思想，建立不同的处理模型便可。

当页面变化的时候，我们只需要监听hashchange和popstate事件，做路由转化transitionTo

这样我们一方面通过this.current.route = targetRoute达到了对之前劫持数据的更新，来达到视图更新。另一方面我们又通过任务队列的调度，实现了基本的钩子函数beforeEach、beforeLeave、beforeEnter、afterEnter。

到这里其实也就差不多了，接下来我们顺带着实现几个API吧：

到这里也就基本上结束了。源码地址：

https://github.com/muwoo/blogs/tree/master/src/router