一.vueRouter实现方式：
vue-router是通过hash和History interface两种方式实现前端路由，更新视图但不重新请求页面，在vue-router中，mode参数决定采用哪一种方式来实现路由跳转。
mode参数：
- 默认hash
- history（注：如果浏览器不支持history新特性，则采用hash方式）
- 如果不在浏览器环境中则使用abstract（node环境下）
当你选择了mode类型之后，程序会根据你选择的mode类型创建不同的history对象（HashHistory或HTML5History或AbstractHistory）
hash模式：
1. vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
2. hash虽然出现在URL中，但不会被包括在HTTP请求中。它是用来指导浏览器动作的，对服务器端完全无用，因此，改变hash不会重新加载页面
3. 每一次改变hash（window.location.hash），都会在浏览器的访问历史中增加一个记录
4. hash 模式的原理是 onhashchange 事件(监测hash值变化)
HashHistory替换路由有两种方式：HashHistory.push() 和 HashHistory.replace():
- HashHistory.push() 将新路由添加到浏览器访问历史的栈项
$router.push() // 调用方法 push()等方法只是一个代理实际是调用的具体history对象的对应方法
HashHistory.push() // 根据Hash模式调用，设置hash并添加到浏览器历史记录（添加到栈项）（window.location.hash = xxx）
History.transitonTo() //transitionTo()方法是父类中定义的是用来处理路由变化中的基础逻辑的， 监测更新，更新则调用History.updateRoute()
History.updateRoute() // 更新路由
{app._route = route} // 替换当前app路由
vm.render() // 更新视图
- HashHistory.replace
replace() 方法与push()方法不同之处在于，它并不是将新路由添加到浏览器访问历史的栈项，而是替换当前路由
history
- 分利用了html5 history interface 中新增的 pushState() 和 replaceState() 方法
- 这两个方法应用于浏览器记录栈，在当前已有的 back、forward、go 基础之上，它们提供了对历史记录修改的功能。
- 只是当它们执行修改时，虽然改变了当前的 URL ，但浏览器不会立即向后端发送请求。
HTML5History替换路由两种方式：pushState()和replaceState()
-
window.history.pushState(stateObject, title, URL)
-
window.history.replaceState(stateObject, title, URL)
hash模式基本类似，只不过将对window.location.hash直接进行赋值和window.location.replace()分别改为了调用history.pushState()和history.replaceState()方法。
异同：
- pushState设置新的URL可以是与当前URL同源的任意URL；而hash只能修改#后面的部分，故只可以设置与当前同文档的URL
- pushState设置的新URL可以与当前URL一模一样，这样也会把记录添加到栈中；而hash设置的新值必须与原来不一样才会触发记录添加到栈中
- pushState通过stateObject可以添加任意类型的数据到记录中，而hash只可添加短字符串
- pushState可以额外设置title属性供后续使用
- 比如用户直接在地址栏中输入并回车，浏览器重启重新加载应用等。hash模式仅改变hash部分的内容，而hash部分是不会包含在HTTP请求中的。history模式会将url修改的和正常请求后端的url一样，如果后端没有配置对应的（/user/id）路由处理，则会返回404错误