vue-router先hash模式部署项目，而后开启histroy模式 ，引起的几个问题以及histroy模式的开启方式、优势

前言：

vue路由有一个HTML5 History 模式,这个模式要在路由里面另外开启的，不少人在刚使用路由的时候以前不知道这个模式，因此并无启用，而后就把项目部署上去了，由于这个模式仍是有挺多优势的，最后仍是会开启这个模式。

然而由于以前使用hash模式再改成histroy模式仍是有些问题的，我已经踩过坑了，而后把这几个问题写出来。有须要的朋友能够作一下参考，喜欢的能够点波赞，或者关注一下，但愿能够帮到你们。

本文首发于个人我的blog：obkoro1.com

开启history模式：

若是不开启的话，路由默认是hash模式，开启这个模式前端的工做也很简单，以下：

mode: 'history' //在路由那里配置一下这个
复制代码

最后须要后端的作一些配置配合，这里能够参考一下文档给的栗子。

history模式的优势:

1. url变成真正的url，url看上去更好看。

   http://yoursite.com/#/a/b  //hash模式
    http://yoursite.com/a/b  //history模式
   复制代码

2. 可使用vue-router的滚动行为，这个用来记忆进入其余页面以前的位置很是好用，配置一下就能够直接使用了，前提是开启histroy模式。

   

3. 相似项目引入微信js-sdk的时候，一些操做是对url是有要求，url不能带上'#'，若是没有开启histroy模式，极可能会致使问题。

4. 像vue-cli的配置，都是以路由开启history模式的标准来配置的（下面会讲到一个栗子），没有开启的话，本身要另外配置。

先hash模式，后histroy模式

就像开头说的，这里的问题指的是：先用hash模式部署项目到线上，而后再开启histroy模式，由此引起的一些问题。

1.找不到资源问题：

在hash模式下面，直接打包的话，会致使找不到css、js和图片资源，而后通过百度以后，作出了以下截图的配置操做，更改assetsPublicPath：'/'为 assetsPublicPath：'./'

在hash模式下，像上面那么配置就没有问题了。当时我还觉得vue-cli配置有问题，实际上，人家才没有问题呢，是咱们本身没有开启history模式的问题。

而后开启了histroy模式以后，由于咱们以前更改了assetsPublicPath属性，因此要把那个.给去掉，改回来：assetsPublicPath：'/'

2.请求带上路由，致使请求失败

正确的请求是：

http:www.xxx.com/api/接口 //api是我经过proxyTable转发地址的代理名字
复制代码

开启histroy模式以后：

在二层的路由里面会出现这种状况：

路由是：http:www.xxx.com/a/b
    http:www.xxx.com/api/a/接口 //这就致使了请求失败，要把a也去掉才是正确的
复制代码

解决方式是：

由于我用的是axios，因此能够在全局请求中设置一个baseURL，这个baseURL就是项目的网站地址（http:www.xxx.com）,而后二层的路由也会自动去掉前面的a和b。

3.cookie问题

这个实际上不是个问题，彻底是本身做的，我把项目分为两层。因此从a登陆，b那边刷新就会出现没有cookie的状况。

两层路由
    http://yoursite.com/a
    http://yoursite.com/b
复制代码

这里是由于cookie可否拿到跟存储的路由位置是有关的，以前使用hash模式由于hash模式的urlhttp://yoursite.com/#/a/b，会统一存在http://yoursite.com下面。

而history模式cookie就会存在http://yoursite.com/a或者http://yoursite.com/b下面，另一边就会没有cookiie。

解决办法：

1. 不要分为两层，统一全部的路由都在一个路由地址下面。

2. 在项目的路由的根地址path:'/'里面存cookie。

3. 使用sessionStorage存信息，我就是用这个方法，使用方法。

   sessionStorage只要在http://yoursite.com均可以访问的到，不论是存在a上面仍是b上面。

后话

以上就是本文的全部内容，建议项目一开始仍是直接跟后端说一下，开启histroy模式，免得后面的种种坑。上面的内容都是本人亲自踩坑以后的血泪教训，但愿能够帮助到须要的朋友，最后Merry Christmas。

最后：如需转载，请放上原文连接并署名。码字不易，感谢支持！本人写文章本着交流记录的心态，写的很差之处，不撕逼，可是欢迎指点。而后就是但愿看完的朋友点个喜欢，也能够关注一下我。 我的blog and 掘金我的主页

以上2017.12.25