Vue-router 中使用 history模式还是 hash模式

在搭建项目的时候，很多前端小伙伴在选择路由模式的时候会嫌弃hash而偏爱history模式，因为hash模式的网址看起来“不正规”，里面总是有个难看的#，而history模式就没有这个问题。

hash	history
#	无
无	404 (nginx)

但接下来往往会发生这么一种情况，自己高高兴兴敲完代码后打包部署到测试环境，这里点点哪里点点，看起来一切正常，直到测试同学用他那开过光的手点了下F5。

Duang！Nginx返回的404page把你干懵了！

不可能吧，开发环境明明是好好的啊！

可能你知道这是history模式的锅，只是简单的知道后端服务器要做一些专门的配置来适应这种模式，但如何配置却不知道，也因为不了解原理不知道如何跟后端沟通叫后端配置，所以改回hash模式，从此对history敬而远之。又或者根本不知道是这个模式的锅，而在错误的道路上越走越远，一直走，一直掉沟里。

首先要确认的是，history模式在生产环境极有可能会出现刷新无法找到页面的情况，因为一般情况下，Nginx并不会对这种情况做配置。如果你折腾过一点Nginx，了解些皮毛，你会在/config/nginx.conf中发现如下配置：

location / {
  root   html;
  index  index.html index.htm;
}

这个配置的大概意思就是你访问/路径的时候，Nginx会匹配返回index.htm的资源，这种匹配逻辑在hash模式中不会产生问题，因为该模式，你不管这么折腾，url都没有变化。http://test.example.com:3000/#/和http://test.example.com:3000/#/about的pathName都是/。所以在刷新页面时，Nginx在匹配资源时遇上pathName为/时总是返回index.html。而在history模式里，http://test.example.com:3000/的pathName是/，http://test.example.com:3000/about的pathName的pathName是/about。所以当你在http://test.example.com:3000/页刷新时，不会出现任何问题，会匹配上/返回index.html，而http://test.example.com:3000/about页面刷新时，因pathName变成了/about，而ngxin中并没有设置/about的匹配规则，这个时候就会返回404page了。

开发环境中没有出现这个问题的原因是因为开发服务器对这个做了设置，所以不用操心。但测试和生产一般用的是nginx之类的服务器，所以需要配置。

怎么配置呢？

有两种思路，一种是穷举，一种是一锅端。

穷举就是把所有代码中会产生的pathName列出来，让其都指向index.html。一锅端就是不管你什么pathName我都给指向index.html。穷举繁杂，但有有个优势，就是可以照旧配置404page，一锅端省事，但你再怎么折腾都看不到nginx返回的404page了，因为所有不管是正常的还是异常的请求都被指向到了index.hmtl页面。不过这个可以通过vue-router的路由设置弥补，就是不匹配的时候指向项目自身的404page页。

一锅端的方式需要将上面Nginx的配置做一点小调整。

location / {
  root   html;
  index  index.html index.htm;
  try_files $uri $uri/ /index.html;
}