HTML5 history 模式

因为vue-router默认使用hash模式，这会在URL中使用"#“来标识要跳转的目标的路径，我们可以使用路由的history模式来使”#"消失，这种模式利用history.pushStateAPI来完成URL的跳转而无须重新加载页面。

修改router目录下index.js文件，将路由改为history模式。代码如下所示：

...
export default new VueRouter({
	mode: 'history',
	...
})

再次运行项目，你就会发现项目中所有的URL中的’"#"都消失不见了。

不过history模式也有一个问题，当你在浏览器的地址栏中直接输入URL或者刷新页面的时候，因为该URL是正常的URL，所以浏览器会解析该URL向服务器发起的请求，如果服务器没有针对该URL的响应，就会出现404错误。在history模式下，如果是通过导航链接来路由页面，VueRouter会在内部截获单击事件，通过JS操作window.history来改变浏览器地址栏里的路径，在这个过程中并没有发起HTTP请求，所以就不会出现404错误。

如果使用history模式，那么需要在前端程序部署的Web服务器上配置一个覆盖所有情况的备选资源，即当URL匹配不到任何资源的时候，返回一个固定的index.html页面，这个页面就是单页应用程序的主页面。
VueRouter的官网给出了一些常用的Web服务器的配置。网址如下：
https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90

如果使用tomcat作为前端程序的Web服务器，可以在项目根目录下新建WEB-INF子目录，在其下新建一个web.xml文件，代码如下所示：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
                      http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
 version="4.0">
 	<error-page>
 		<error-code>404</error-code>
 		<location>/index.html</location>
 	</error-page>
 </web-app>

按照上述配置后，Tomcat服务器就不会再返回404错误页面，对于所有不匹配的URL都会返回设置好的index.html页面。

Ps：在开发时，可以先使用hash模式，在生产环境下，再根据部署的服务器调整为history模式。不过，在基于Vue脚手架项目的开发中，内置的Node服务器本身也支持history模式，所以开发时一般不会出现问题。