路由的hash模式和history模式（适用于3.x版本的vue-router）

路由介绍： 

• 路由有两种模式：hash模式、history模式
• hash模式：地址上有“#”（哈希字符），是hash模式；只要是带有“#”的，都是前端路由；
• history模式：例如：http://yoursite.com/user/id，这种很顺滑的；
• vue-router默认是hash模式----使用URL的hash来模拟一个完整的URL，于是当URL改变时，页面不会重新加载。
• 如果不想要很丑的hash，我们可以用路由的history模式，这种模式充分利用history.pushState API
• 来完成URL跳转而无须重新加载页面。

---

为什么要用“history”模式：

（1）好看

（2）在分享网址的时候，有些软件会自动网址后面加上“#”，那用hash路由就会出现问题；

缺点是：

不好区分是一个路由是前端路由还是后端路由，要是配置不好，浏览器是默认这个路由是后端路由，向后端这个接口发起请求，就会出错了。

---

如何转换成 history路由 呢 ：

const router = new VueRouter({
  mode: 'history',
  routes
})

只需要在路由配置的js文件下，默认是index.js文件，路由定义里加上：mode: 'history' , 默认是不写mode是hash模式；

---

用 history模式 一定会出现的问题：

因为这种模式不好区分一个路由是前端路由还是后端路由，而浏览器默认认为是后端的，所以向后端的这个接口发请求，如果后台没有正确的配置，当用户在浏览器直接访问这个网址就会返回404。

如何去解决这种问题：

（官方语言：）所以呢，我们要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你app依赖的页面。

（通俗来讲：）所有功能都做好了，使用的是history模式，在线上发布的时候，肯定会执行一个npm  run build这个命令，这个命令会在项目里生成一个dist文件夹，就把这个文件夹发给你的后端，这个文件夹里有一个index.html文件，告诉后端，如果出现处理不了的页面，就返回这个index.html页面就行了。如何返回这个index.html页面，就需要后端去配置了。

后台配置：

参考官方文档：HTML5 History 模式 | Vue Router

里面有不同的后端不一样的配置代码：

例如：