vue history 模式（路由）

vue 里面路由有两种显示模式是hash和history，默认是hash

• hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。比如这个 URL：http://www.abc.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。
• history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

一般情况下两种都可以满足实际需求，不过在微信中的支付、分享等，url作为参数传递，页面会把"#"后边的内容处理掉，后台取不到#后面的东西除非将url进行编码，然后后端配合进行解码，显然是不满足实际需求的，因此要用到history模式。另外如果你追求url的美观，不希望url中含有#号，那你可以选择使用history。

使用history需要前后端同时进行配置，下面来讲解一下怎们配置history：

前端项目配置：

1.在路由配置页面，即router/index.js

const router = new Router({
  mode: 'history',   // 模式，默认hash
  base: '/dist', // 基础路径
  routes: [...]
})
注意：如果项目不在服务器的根目录下，即static和index.html不在服务器根目录下面，
就要设置base，例如我把打包好的dist文件直接放到了服务器的根目录下，此时就要配置base为“/dist”

2.在项目文件下面创建.htaccess文件（跟static和index.html同级）

.htaccess文件的内容如下：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /dist/                    // 项目文件
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /dist1/index.html [L]   // .后面的空格不能删掉
</IfModule>

到此，前端部分的配置已经完成

服务器后端配置(这里只讲解Apache,目前使用的）

需要设置  AllowOverride All

需要支持路径重写必须加载重写模块   LoadModule rewrite_module modules/mod_rewrite.so

1.找到httpd.conf文件将AllowOverride None 改为 AllowOverride All

2.找到httpd.conf文件查看加载重写模块LoadModule rewrite_module modules/mod_rewrite.so是否被屏蔽，即前面是否有#号

通过上面的前后端的设置，history模式就设置完成了。亲测，路由中没有#，且刷新页能正常显示。

如果打开还是白屏，则检查项目里面文件路径配置是否正确，可以参考下面的文章链接：

vue配置、vue打包白屏,图片加载不出等问题