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;
}

 

来源：oschina

链接：https://my.oschina.net/u/735642/blog/2998919