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