Vue-Router 实现原理之 Vue 修改了 url，但是没有发送请求

前端路由概念

通过改变 URL，在不重新请求页面的情况下，更新页面视图。

vue-Router 两种模式

更新视图但不重新请求页面，是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有 2 种方式：

• Hash：默认值，利用 URL 中的hash(“#”) http://localhost:8080/#/login
• history：利用URL中的路径（/home） http://localhost:8080/home

HashHistory

HashHistory 拥有两个方法，一个是 push，一个是 replace。replace()方法与 push() 方法不同之处在于，它并不是将新路由添加到浏览器访问历史的栈顶，而是替换掉当前的路由

HTML5History

早期 History 通过 back()、forward()、go() 等方法，我们可以读取浏览器历史记录栈的信息

从 HTML5 开始 History 提供了2个新的方法：pushState()、replaceState()

window.history.pushState(data, title, targetURL);
// 状态对象：传给目标路由的信息,可为空
// 页面标题：目前所有浏览器都不支持,填空字符串即可
// 可选url：目标url，不会检查url是否存在，且不能跨域。如不传该项,即给当前url添加data


window.history.replaceState(data, title, targetURL);
//类似于pushState,但是会直接替换掉当前url,而不会在history中留下记录

假定当前网址是 example.com/1.html，使用 pushState() 方法在浏览记录（History 对象）中添加一个新记录。

var stateObj = { foo: 'bar' };
history.pushState(stateObj, 'page 2', '2.html');

添加新记录后，浏览器地址栏立刻显示 example.com/2.html，但并不会跳转到2.html，甚至也不会检查 2.html 是否存在，它只是成为浏览历史中的最新记录

这2个方法有个共同的特点：当调用他们修改浏览器历史栈后，虽然当前 url 改变了，但浏览器不会立即发送请求该 url，这就为单页应用前端路由，更新视图但不重新请求页面提供了基础

两种模式比较

1. pushState 设置的新 URL 可以是与当前 URL 同源的任意URL；而 hash 只可修改 # 后面的部分，故只可设置与当前同文档的URL
2. pushState 通过 stateObject 可以添加任意类型的数据到记录中；而hash 只可添加短字符串
3. pushState 可额外设置 title 属性供后续使用
4. history 模式则会将 URL 修改得就和正常请求后端的 URL 一样，如后端没有配置对应 /user/i d的路由处理，则会返回404错误