vue-router模式history与hash

【重点】

　　history与hash路由的区别

hash前端路由，无刷新
history   会去请求接口

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！

不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。

所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

【文章参考】

vue-router提供两种模式的原因：

vue 是渐进式前端开发框架，为了实现 SPA ，需要引入前端路由系统（vue-router）。前端路由的核心是：改变视图的同时不会向后端发出请求。

为了达到这一目的，浏览器提供了 hash 和 history 两种模式。

hash ：hash 虽然出现在 URL 中，但不会被包含在 http 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。
history ：history 利用了 html5 history interface 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器记录栈，在当前已有的 back、forward、go 基础之上，它们提供了对历史记录修改的功能。只是当它们执行修改时，虽然改变了当前的 URL ，但浏览器不会立即向后端发送请求。

因此可以说， hash 模式和 history 模式都属于浏览器自身的属性，vue-router 只是利用了这两个特性（通过调用浏览器提供的接口）来实现路由。

实现的原理：

hash 模式的原理是 onhashchange 事件，可以在 window 对象上监听这个事件。
history ：hashchange 只能改变 # 后面的代码片段，history api （pushState、replaceState、go、back、forward）则给了前端完全的自由，通过在window对象上监听popState()事件

pushState()、replaceState() 方法接收三个参数：stateObj、title、url。

// 设置状态
history.pushState({color: "red"}, "red", "red");

// 监听状态
window.onpopstate = function(event){
    console.log(event.state);
    if(event.state && event.state.color === "red"){
        document.body.style.color = "red";
    }
}

// 改变状态
history.back();
history.forward();

应用场景：

通过 pushState 把页面的状态保存在 state 对象中，当页面的 url 再变回到这个 url 时，可以通过 event.state 取到这个 state 对象，从而可以对页面状态进行还原，如页面滚动条的位置、阅读进度、组件的开关等。

调用 history.pushState() 比使用 hash 存在的优势：

pushState 设置的 url 可以是同源下的任意 url ；而 hash 只能修改 # 后面的部分，因此只能设置当前 url 同文档的 url
pushState 设置的新的 url 可以与当前 url 一样，这样也会把记录添加到栈中；hash 设置的新值不能与原来的一样，一样的值不会触发动作将记录添加到栈中
pushState 通过 stateObject 参数可以将任何数据类型添加到记录中；hash 只能添加短字符串
pushState 可以设置额外的 title 属性供后续使用

劣势：

history 在刷新页面时，如果服务器中没有相应的响应或资源，就会出现404。因此，如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面
hash 模式下，仅 # 之前的内容包含在 http 请求中，对后端来说，即使没有对路由做到全面覆盖，也不会报 404

【文章2】

随着 ajax 的使用越来越广泛，前端的页面逻辑开始变得越来越复杂，特别是spa的兴起，前端路由系统随之开始流行。

从用户的角度看，前端路由主要实现了两个功能（使用ajax更新页面状态的情况下）：

记录当前页面的状态（保存或分享当前页的url，再次打开该url时，网页还是保存（分享）时的状态）；
可以使用浏览器的前进后退功能（如点击后退按钮，可以使页面回到使用ajax更新页面之前的状态，url也回到之前的状态）；

作为开发者，要实现这两个功能，我们需要做到：

改变url且不让浏览器向服务器发出请求；
监测 url 的变化；
截获 url 地址，并解析出需要的信息来匹配路由规则。

我们路由常用的hash模式和history模式实际上就是实现了上面的功能。

hash模式

这里的 hash 就是指 url 尾巴后的 # 号以及后面的字符。这里的 # 和 css 里的 # 是一个意思。hash 也称作锚点，本身是用来做页面定位的，她可以使对应 id 的元素显示在可视区域内。

由于 hash 值变化不会导致浏览器向服务器发出请求，而且 hash 改变会触发 hashchange 事件，浏览器的进后退也能对其进行控制，所以人们在 html5 的 history 出现前，基本都是使用 hash 来实现前端路由的。

使用到的api：

window.location.hash = 'qq' // 设置 url 的 hash，会在当前url后加上 '#qq'

var hash = window.location.hash // '#qq' window.addEventListener('hashchange', function(){ // 监听hash变化，点击浏览器的前进后退会触发 })

history模式

已经有 hash 模式了，而且 hash 能兼容到IE8， history 只能兼容到 IE10，为什么还要搞个 history 呢？
首先，hash 本来是拿来做页面定位的，如果拿来做路由的话，原来的锚点功能就不能用了。其次，hash 的传参是基于 url 的，如果要传递复杂的数据，会有体积的限制，而 history 模式不仅可以在url里放参数，还可以将数据存放在一个特定的对象中。
最重要的一点：

如果不想要很丑的 hash，我们可以用路由的 history 模式
—— 引用自 vueRouter文档