前端路由的工作原理（借鉴）

路由最初是由后端提出，浏览器发出请求，服务器根据路由的配置，返回相应信息。后来随着ajax的流行，异步数据请求交互在浏览器局部刷新。单页面更是把这种方式用到了极致，不仅仅是在页面交互是无刷新的，连页面跳转都是无刷新的

1、利用H5中的history API 实现
主要利用history.pushStatae和history.replaceState来实现，不同之处在于，pushState会增加一条新的历史记录，而replaceState则会替换当前的历史记录，并且再用该方法发布项目时，还需配置一下Apache。

2、用URL的hash实现
我们在URL中常看到#，这个符号，而“#”这个符号有两种情况，一个是我们所谓的锚点，但是路由里的锚点不叫锚点，我们称之为hash,它主要利用监听hash 值的变化来触发事件 ——hashchange事件来做页面局部的更新。

总结：
两者相比较而言，hash方案兼容性好，而H5的history主要针对的高级浏览器.

两者的区别：
hash ：hash 虽然出现在 URL 中，但不会被包含在 http 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。
history ：history 利用了 html5 history interface 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器记录栈，在当前已有的 back、forward、go 基础之上，它们提供了对历史记录修改的功能。只是当它们执行修改时，虽然改变了当前的 URL ，但浏览器不会立即向后端发送请求。
因此可以说， hash 模式和 history 模式都属于浏览器自身的属性，vue-router 只是利用了这两个特性（通过调用浏览器提供的接口）来实现路由。

通过Vue.use方法对路由做一个注册，把导入的插件传进去，和Vue关联起来。这个方法会调用plugin来执行插件的install方法，所以一般写插件都会有一个install方法，install方法里，利用Vue.mixin方法给每一个组件注入钩子函数beforeCreate和destroyed前者获得路由实例，初始化路由配置。同时内置全局RouterView和RouterLink两个组件。

new Router时产生这个类的一个实例,路由初始化是在组件初始化阶段，调用beforeCreate钩子函数，执行router.init()初始化路由