vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。
当你使用 history 模式时，URL 就像正常的 url，例如 yoursite.com/user/id，也好看…
个人理解
上面是官方的解释，文档的一贯风格，只给懂的人看。两年前我比现在还菜的时候，看了这段话表示他在说个锤子，直接跳过了。
我不讲:hammer:，直接举:chestnut:
一般的我们把项目放到服务器上，路由都是在服务器中设置的。
比如网站 https://www.text.com/ 中 admin目录下有一个 login.html 的页面。当用户输入 https://www.text.com/admin/login ，先解析 域名部分得到服务器 ip 和 端口号，根据 ip 和 端口号找到对应的服务器中的对应的程序，然后在程序解析 /admin/login 路径知道了你要找的是 admin 目录下的 login.html 页面，然后就返回给你这个页面。
这是正常的方式，服务器控制一个路由指向一个页面的文件（不考虑重定向的情况），这样我们的项一般有多少个页面就有多少个 html 文件。
而 vue 中，我们打包好的文件其实是只有一个 index.html ，所有的行为都是在这一个页面上完成。用户的所有的路由其实都是在请求 index.html 页面。
假设承载 vue 项目 index.html 也是在 admin 目录下，vue 项目中也有一个 login 页面，那对应的url就是 https://www.text.com/admin/#/login 。
这个 url 由三部分组成，是 是域名， /admin 是项目所在目录，和上面一样这个解析工作是由服务器完成的，服务器解析出 /admin 的路由，就返回给你 index.html 。 /#/login 是 vue-router 模拟的路由，因为页面所有的跳转 vue 都是在 index.html 中完成的，所以加上 # 表示页内切换。假设切换到 home 页面，对应的 html 文件还是 index.html ，url 变成 https://www.text.com/admin/#/home ，vue-router 判断到 /#/home 的改变而改变了页面 dom 元素，从而给用户的感觉是页面跳转了。这就是 hash 模式。
那我们就知道了，正常的 url 和 hash 模式的区别，页面的 js 代码没办法获取到服务器判断路由的行为，所以只能用这种方式实现路由的功能。
而 history 模式就是让 vue 的路由和正常的 url 一样，至于怎么做下文会说到。
为什么需要实现
说怎么做之前，先说说为什么需要 history 模式。官方文档说了，这样比较好看。emmmmmm，对于直接面向消费者的网站好看这个确实是个问题，有个 /# 显得不够大气。对于企业管理的 spa 这其实也没什么。
所以除了好看之外，history 模式还有其他优势。
我们知道，如果页面使用锚点，就是一个 <a> 标签， <a href='#mark1'></a> ，点击之后如果页面中有 id 为 mark1 的标签会自动滚动到对应的标签，而 url 后面会加上 #mark .
问题就出在这里，使用 hash 模式， #mark 会替换掉 vue-router 模拟的路由。比如这个 <a> 标签是在上面说的 login 页面，点击之后 url 会从 https://www.text.com/admin/#/login 变成 https://www.text.com/admin/#/mark 。wtf？？？正常看来问题不大，锚点滚动嘛，实在不行可以 js 模拟，但是因为我要实现 markdown 的标题导航功能，这个功能是插件做好的，究竟该插件还是用 history 。 权衡利弊下还是使用 history 模式工作量小，而且更美。
怎么做
既然知道是什么，为什么，下面就该研究怎么做了。
官方文档里有“详尽”的说明，其实这事儿本来不难，原理也很简单。通过上文我们知道 vue-router 采用 hash 模式最大的原因在于所有的路由跳转都是 js 模拟的，而 js 无法获取服务器判断路由的行为，那么就需要服务器的配合。原理就是无论用户输入的路由是什么全都指向 index.html 文件，然后 js 根据路由再进行渲染。
按照官方的做法，前端 router 配置里面加一个属性，如下
const router = new VueRouter({ mode: 'history', routes: [...] })
后端的我不一一赘述，我用的是express，所以直接用了 connect-history-api-fallback 中间件。（中间件地址 https://github.com/bripkens/connect-history-api-fallback）
const history = require('connect-history-api-fallback') app.use(history({ rewrites: [ { from: /^\/.*$/, to: function (context) { return "https://www.jb51.net/"; } }, ] })); app.get('https://www.jb51.net/', function (req, res) { res.sendFile(path.join(process.cwd(), "client/index.html")); }); app.use( express.static( path.join(process.cwd(), "static"), { maxAge: 0,//暂时关掉cdn } ) );
坑1
按道理来说这样就没问题了，然鹅放到服务器里面之后，开始出幺蛾子了。静态文件加载的时候接口返回都是
We're sorry but client doesn't work properly without JavaScript enabled. Please enable it to continue.