vue-router和react-router实现原理

首先说明下两种是针对不同框架库的路由库，两种库都有三种路由方式，分别是：

1. hash模式（老版浏览器支持）
2. History模式(高版本浏览器支持)
3. memory / abstract 模式（nodejs）

可以看出两个库大同小异。下面来看下具体的实现

1. 初始化

createBrowserHistory / HTML5History: 利用HTML5里面的history

createHashHistory / HashHistory: 通过hash来存储在不同状态下的history信息

createMemoryHistory / AbstractHistory: 在内存中进行历史记录的存储

2. 执行URL前进

history: pushState、replaceState

hashHistory: location.hash=***、 location.replace()

Memory / abstract : 在内存中进行历史记录的存储

3. 执行URL后退

history: popState

hashHistory: hashChange

Memory / abstract : 在内存中进行历史记录的存储

一般来说，hash模式与history模式是差不多的，推荐history模式，理由竟然是："#" 符号有点丑啊...0_0 "，但是呢，但是呢，我们又不能只是看颜值是吧。

pushState设置的新URL可以是与当前URL同源的任意URL；而hash只可修改#后面的部分，故只可设置与当前同文档的URL

pushState通过stateObject可以添加任意类型的数据到记录中；而hash只可添加短字符串

pushState可额外设置title属性供后续使用

history模式则会将URL修改得就和正常请求后端的URL一样。

hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取；
特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。
hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。

history模式：history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。
history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理，将返回 404 错误。Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。”

根据自己的情况选择啊！