vue部署后刷新白屏404？前端路由模式详解（hash和history）

---

前言

不知道大家有没有遇到过一种情况，当自己的vue部署在服务器上时，一切都如想象办运转，然后脑袋duang的一下，突然想去刷新，然后网页就duang的一下，白屏了。

不出意外的话，我猜你用的一定是history的路由模式。

没错，这就是history中的一个问题，接下来让我们带着问题一起探索一下前端路由吧！

一、为什么要有前端路由？

对于 Vue 这类渐进式前端开发框架，为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。

二、前端路由模式

为了达到这一目的，浏览器当前提供了以下两种支持：

hash模式和history 模式，接下来让我们一起来分析一下这两种路由模式吧！

1.hash

hash 模式是一种把前端路由的路径用井号 # 拼接在真实 URL 后面的模式。当井号 # 后面的路径发生变化时，浏览器并不会重新发起请求，而是会触发 hashchange 事件。

即地址栏 URL 中的 # 符号。比如这个 URL：http://www.test.com/#/test，hash 的值为 #/test。它的特点在于：hash 虽