前后端完全分离下Vue Router history模式的实现

前段时间上线了使用vue全家桶搭建的个人博客，访问地址为Civitasv’s blog。采用了前后端完全分离模式，将前端页面部署到GitHub pages页面，后端部分部署至阿里云个人服务器，仅用于提供数据和rest服务接口。之前的是采用hash模式，并无问题，但最近感觉很多#不太美观，且不利于SEO，因此考虑将其改变为history模式，遇到了一些问题，特此记录分享。

0 简述vue路由history模式原理

首先，要理解为了构建SPA应用，需要引入vue前端路由系统，其目的在于改变视图不向服务器发送请求，也就是说，向服务器发送页面请求事实上只有最开始的一次，其余的页面均依赖前端路由动态改变引入的资源文件实现。

在实现上述功能时，vue路由history模式利用了H5新增的pushState()和replaceState()接口方法，它们分别可以添加和修改历史记录条目。这些方法通常与window.onpopstate 配合使用。假设在http://starss.me上中执行history.pushState(null, null, "home")，浏览器地址会变为http://starss.me/home/，但页面不会刷新，也即不会向服务器发送请求，接着vue router就对该url进行处理，实