vue路由模式

vue的路由模式，vue中实现前端路由主要模式有两种，hash模式和history模式。
vue中路由默认使用hash模式，hash模式是基于javascript的onhashchange()方法，可以从MDN上看一下：

当 一个窗口的 hash （URL 中 # 后面的部分）改变时就会触发 hashchange 事件（参见 location.hash）。

在 mozilla官网可以测试一波

 window.onhashchange = function(event){     
    console.log(event.oldURL, event.newURL);     
    let hash = location.hash.slice(1);     
    document.body.style.color = hash;
}

改变url中#后面的部分，查看效果:

history模式主要使用了html5中的对history中栈的操作，可以看一下它的几个api

使用 back(), forward()和 go() 方法来完成在用户历史记录中向后和向前的跳转。

back()指的是向后跳转，forward()指的是向前跳转，go()可以指定参数
看一下实际运用

此外history模式有两个api是修改历史浏览记录的，可以这么理解，在浏览器上所有的浏览历史网址都被放在了一个栈中，当我们使用pushState和replaceState方法是，就是对历史浏览记录栈进行操作，pushState是往当前栈添加新的记录，replaceState是替换当前栈中的内容，实践一下

最后总结一下两者的区别，除了最明显的两者的url不一样，hash模式带#之外,还存在以下的区别：

1. hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.abc.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。
2. history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.abc.com/book/id 如果后端缺少对 /book/id 的路由处理，将返回 404 错误。Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。”