摘要：先模式，后模式就像开头说的，这里的问题指的是先用模式部署项目到线上，然后再开启模式，由此引发的一些问题。后话以上就是本文的所有内容，建议项目一开始还是直接跟后端说一下，开启模式，省得后面的种种坑。
前言：
vue路由有一个HTML5 History 模式,这个模式要在路由里面另外开启的，很多人在刚使用路由的时候之前不知道这个模式，所以并没有启用，然后就把项目部署上去了，因为这个模式还是有挺多优点的，最后还是会开启这个模式。
然而因为之前使用hash模式再改为histroy模式还是有些问题的，我已经踩过坑了，然后把这几个问题写出来。有需要的朋友可以做一下参考，喜欢的可以点波赞，或者关注一下，希望可以帮到大家。
本文首发于我的个人blog：obkoro1.com开启history模式：
如果不开启的话，路由默认是hash模式，开启这个模式前端的工作也很简单，如下：
mode: "history" //在路由那里配置一下这个
最后需要后端的做一些配置配合，这里可以参考一下文档给的栗子。
history模式的优点:url变成真正的url，url看上去更好看。
http://yoursite.com/#/a/b //hash模式
http://yoursite.com/a/b //history模式
可以使用vue-router的滚动行为，这个用来记忆进入其他页面之前的位置非常好用，配置一下就可以直接使用了，前提是开启histroy模式。
类似项目引入微信js-sdk的时候，一些操作是对url是有要求，url不能带上"#"，如果没有开启histroy模式，很可能会导致问题。
像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。
解决办法：不要分为两层，统一所有的路由都在一个路由地址下面。
在项目的路由的根地址path:"/"里面存cookie。
使用sessionStorage存信息，我就是用这个方法，使用方法。
sessionStorage只要在http://yoursite.com都可以访问的到，不管是存在a上面还是b上面。后话
以上就是本文的所有内容，建议项目一开始还是直接跟后端说一下，开启histroy模式，省得后面的种种坑。上面的内容都是本人亲自踩坑之后的血泪教训，希望可以帮助到需要的朋友，然后祝大家圣诞节快乐。
最后：如需转载，请放上原文链接并署名。码字不易，感谢支持！本人写文章本着交流记录的心态，写的不好之处，不撕逼，但是欢迎指点。然后就是希望看完的朋友点个喜欢，也可以关注一下我。
个人blog and 掘金个人主页
以上2017.12.25
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/90410.html
摘要：使用值来作路由。原生应用本身就是多页的场景，页面间状态的隔离比共享更重要一些。使用开发的是原生应用，页面栈的管理使用的也是原生的特性，没有但是有模块可以实现页面的前进和后退等操作。 系列文章的目录在 ? 这里 （由于 我比较懒 最近一段时间在忙其他事，系列文章拖了好久终于又更新了。。。） 什么是 vue-router ？ vue-router 官方文档 vue-router 是针对 V...
摘要：场景再现众所周知，有三种模式，一般的前端项目中会选择模式进行开发，最近做了一个运营活动就是基于的模式进行开发的。项目注册了两个路由抽象出来的入口页面需要参数，所以提供浏览器里输入回车后，页面自动增加一个变为。 场景再现 众所周知，vue-router有三种模式 ：hash、html5、abstract ， 一般的前端项目中会选择hash模式进行开发，最近做了一个运营活动就是基于vue-...
摘要：于是一个拥有版本控制和过期控制的本地内容存储功能模块就算初步完成了。最后基于这个事情的考虑，于是顺便写了个本地存储控制的库，基本都在上面了 前言 关于localStorage sessionStorage之类的api怎么用已经无需我再赘述了，但是具体怎么落实到一个稍微复杂一些的业务中还是需要做一些前期的准备 遇见的一些问题 1.localStorage 与 sessionStorage...
摘要：于是一个拥有版本控制和过期控制的本地内容存储功能模块就算初步完成了。最后基于这个事情的考虑，于是顺便写了个本地存储控制的库，基本都在上面了 前言 关于localStorage sessionStorage之类的api怎么用已经无需我再赘述了，但是具体怎么落实到一个稍微复杂一些的业务中还是需要做一些前期的准备 遇见的一些问题 1.localStorage 与 sessionStorage...
阅读 2344·2021-11-15 11:37
阅读 2624·2021-09-23 11:21
阅读 2950·2021-09-07 10:11
阅读 3163·2019-08-30 15:53
阅读 2825·2019-08-29 15:13
阅读 1606·2019-08-26 13:57
阅读 1097·2019-08-26 12:23
阅读 2437·2019-08-26 11:51
