Vue Router的路由模式hash和history的实现原理

一、Vue-router 中hash模式和history模式的关系

最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的。

对于vue这类渐进式前端开发框架，为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。

二、hash模式实现原理

早期前端路由的实现就是基于location.hash来实现的，其实实现原理很简单，location.hash的值就是URL中#后面的内容，比如下面这个网站，它的location.hash的值为#search:
https://www.lvyweb.com#search
hash路由模式的实现主要特性:

• URL中的hash值只是客户端的一种状态，也就是说当向服务器发送请求时，hash部分不会被发送；
• hash值的改变，都会在浏览器的访问历史中增加一个记录，因此在开发时，也可以通过浏览器的回退和前进按钮来控制hash的切换；
• 也可以通过href属性来改变URL的hash值，或者使用location.hash进行赋值，改变URL的hash值；
• 可以使用hashchange事件来监听hash值的变化，从而对页面进行跳转。

三、history模式的实现原理

HTML5提供了History API来实现URL的变化，其中最主要的两个API有以下两个
history.pushState()和history.replaceState()。这两个API可以在不进行刷新的情况下，操作浏览器的历史记录。唯一不同的是，前者是新增一个历史记录，后者是直接替换当前的历史记录。

window.history.pushState(null,null,path)
window.history.replaceState(null,null,path)

History路由模式虽然好看，但是这种路由模式想要玩好，还需要后台配置支持，因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器访问http://outsite.com/user/id返回404,这就不好看了。
所以呢，你要在服务器增加一个覆盖所有情况的候选资源：如果URL匹配不到任何静态资源，则应该返回同一个index.html页面，这个页面就是你app依赖的页面。