Vue-router是Vue的核心组件，主要是作为Vue的路由管理器，Vue-router默认hash模式，通过引入Vue-router对象模块时配置mode属性可以启用history模式。

描述#
Vue-router的hash模式使用URL的Hash来模拟一个完整的URL，当URL改变时页面不会重新加载，而Vue-router的history模式是充分利用history.pushState的API来完成URL跳转，同样在页面跳转时无须重新加载页面，当然也不会对于服务端进行请求，当然对于history模式仍然是需要后端的配置支持，由于应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问URL时就会返回404，所以需要在服务端增加一个覆盖所有情况的候选资源，如果URL匹配不到任何静态资源时，则应该返回同一个index.html应用依赖页面，例如在Nginx下的配置。

Copy
location / {
try_files $uri $uri/ /index.html;
}
分析#
Vue-router源码的实现比较复杂，会处理各种兼容问题与异常以及各种条件分支，文章分析比较核心的代码部分，精简过后的版本，重要部分做出注释，commit id为560d11d。

首先是在定义Router时调用Vue.use(VueRouter)，这是Vue.js插件的经典写法，给插件对象增加install方法用来安装插件具体逻辑，此时会调用VueRouter类上的静态方法，即VueRouter.install = install，install模块主要是保证Vue-router只被use一次，以及通过mixin在Vue的生命周期beforeCreate内注册实例，在destroyed内销毁实例，还有定义$router与$route属性为只读属性以及与全局组件的注册。

在构造函数中调用了创建路由匹配对象的方法createMatcher，而在createMatcher中又调用了实际用以创建路由映射表的方法createRouteMap，可以说createMatcher函数的作用就是创建路由映射表，然后通过闭包的方式让addRoutes和match函数能够使用路由映射表的几个对象，最后返回一个Matcher对象。

在上文的构造函数中实例化的HTML5History对象就是对于history模式下的路由的处理，主要是通过继承History对象以及自身实现的方法完成路由。在初始化VueRouter时调用的init方法调用了路由切换以及调用了setupListeners方法实现了路由的切换的监听回调，注意此时并没有在HTML5History对象的构造函数中直接添加事件监听，这是因为需要避免在某些浏览器中调度第一个popstate事件，但是由于异步保护，第一个历史记录路由未同时更新的问题。history模式的代码结构以及更新视图的逻辑与hash模式基本类似，主要是监听popstate事件以及对于push()和replace()方法的变动，使用History对象的pushState()与replaceState()等方法进行路由的变换。