前端路由的两种模式：hash模式和history模式

hash模式

这里的hash是指url尾巴后的#号及后面的字符。这里的#和css里的#是一个意思。hash也称做锚点，自己是用来作页面定位的，她可使对应id的元素显示在但是区域内。因为hash值变化不会致使浏览器向服务器发出请求，并且hash改变会触发hashchange事件，浏览器的进后退也能对其进行控制，因此人们在 html5 的 history 出现前，基本都是使用 hash 来实现前端路由的。

改变#不触发网页加载

http://www.example.com/index.html#location1 
// 改为
http://www.example.com/index.html#location

浏览器不会从新向服务器请求index.html 

使用到的api:

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

var hash = window.location.hash // '#qq'  

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

View Code

history模式

 

HTML5规范提供了history.pushState和history.replaceState来进行路由控制。经过这两个方法能够改变url且不向服务器发送请求。同时不会像hash有一个#,更加的美观。可是history路由须要服务器的支持，而且需将全部的路由重定向倒根页面。

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

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

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

因此呢，你要在服务端增长一个覆盖全部状况的候选资源：若是 URL 匹配不到任何静态资源，则应该返回同一个index.html 页面，这个页面就是你 app 依赖的页面。

相关API:

window.history.pushState(state, title, url) 
// state：须要保存的数据，这个数据在触发popstate事件时，能够在event.state里获取
// title：标题，基本没用，通常传 null
// url：设定新的历史记录的 url。新的 url 与当前 url 的 origin 必须是一樣的，不然会抛出错误。url能够是绝对路径，也能够是相对路径。
//如 当前url是 https://www.baidu.com/a/,执行history.pushState(null, null, './qq/')，则变成 https://www.baidu.com/a/qq/，
//执行history.pushState(null, null, '/qq/')，则变成 https://www.baidu.com/qq/

window.history.replaceState(state, title, url)
// 与 pushState 基本相同，但她是修改当前历史记录，而 pushState 是建立新的历史记录

window.addEventListener("popstate", function() {
    // 监听浏览器前进后退事件，pushState 与 replaceState 方法不会触发              
});

window.history.back() // 后退
window.history.forward() // 前进
window.history.go(1) // 前进一步，-2为后退两步，window.history.lengthk能够查看当前历史堆栈中页面的数量

View Code