Vue-router中hash与history的区别

Vue为了构建 SPA, 须要引入前端路由系统Vue-Router。前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。

为了达到这一目的，利用浏览器的特性, Vue-Router提供了如下两种路由模式：

• hash —— 即地址栏 URL 中的 # 符号

好比这个 URL：http://www.test.com/#/hello，hash 的值为 #/hello。它的特色在于：hash 虽然出如今 URL 中，但不会被包括在 HTTP 请求中，对后端彻底没有影响，所以改变 hash 不会从新加载页面。

• history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。

这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会当即向后端发送请求。

hash与history的明显区别

	hash	history
url显示	有#，很Low	无#，好看
回车刷新	能够加载到hash值对应页面	通常就是404掉了
支持版本	支持低版本浏览器和IE浏览器	HTML5新推出的API

为了解决history模式下刷新出现的404问题, 后台须要作一些路由支持, 好比当url不匹配时跳转到index.html.  

若是Vue后台部署使用的是Nginx, 能够这样配置

location / {
   try_files $uri $uri/ /index.html;#支持history模式刷新
   root   /www/test/hello/;
   index   index.html;
}