国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

vue先hash 模式部署項目，然后開啟histroy模式 ，引發的幾個問題以及histroy模式的

Imfan / 595人閱讀

摘要：先模式，后模式就像開頭說的，這里的問題指的是先用模式部署項目到線上，然后再開啟模式，由此引發的一些問題。后話以上就是本文的所有內容，建議項目一開始還是直接跟后端說一下，開啟模式，省得后面的種種坑。

前言：

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90410.html

相關文章

  • [使用 Weex 和 Vue 開發原生應用] 6 使用 vue-router

    摘要：使用值來作路由。原生應用本身就是多頁的場景，頁面間狀態的隔離比共享更重要一些。使用開發的是原生應用，頁面棧的管理使用的也是原生的特性，沒有但是有模塊可以實現頁面的前進和后退等操作。 系列文章的目錄在 ? 這里 （由于 我比較懶 最近一段時間在忙其他事，系列文章拖了好久終于又更新了。。。） 什么是 vue-router ？ vue-router 官方文檔 vue-router 是針對 V...

    leonardofed 評論0 收藏0

  • 容易忽略的URL

    摘要：場景再現眾所周知，有三種模式，一般的前端項目中會選擇模式進行開發，最近做了一個運營活動就是基于的模式進行開發的。項目注冊了兩個路由抽象出來的入口頁面需要參數，所以提供瀏覽器里輸入回車后，頁面自動增加一個變為。 場景再現 眾所周知，vue-router有三種模式 ：hash、html5、abstract ， 一般的前端項目中會選擇hash模式進行開發，最近做了一個運營活動就是基于vue-...

    CoyPan 評論0 收藏0

  • 容易忽略的URL

    摘要：場景再現眾所周知，有三種模式，一般的前端項目中會選擇模式進行開發，最近做了一個運營活動就是基于的模式進行開發的。項目注冊了兩個路由抽象出來的入口頁面需要參數，所以提供瀏覽器里輸入回車后，頁面自動增加一個變為。 場景再現 眾所周知，vue-router有三種模式 ：hash、html5、abstract ， 一般的前端項目中會選擇hash模式進行開發，最近做了一個運營活動就是基于vue-...

    Richard_Gao 評論0 收藏0

  • 關于網頁本地存儲的一些思考

    摘要：于是一個擁有版本控制和過期控制的本地內容存儲功能模塊就算初步完成了。最后基于這個事情的考慮，于是順便寫了個本地存儲控制的庫，基本都在上面了 前言 關于localStorage sessionStorage之類的api怎么用已經無需我再贅述了，但是具體怎么落實到一個稍微復雜一些的業務中還是需要做一些前期的準備 遇見的一些問題 1.localStorage 與 sessionStorage...

    陳江龍 評論0 收藏0

  • 關于網頁本地存儲的一些思考

    摘要：于是一個擁有版本控制和過期控制的本地內容存儲功能模塊就算初步完成了。最后基于這個事情的考慮，于是順便寫了個本地存儲控制的庫，基本都在上面了 前言 關于localStorage sessionStorage之類的api怎么用已經無需我再贅述了，但是具體怎么落實到一個稍微復雜一些的業務中還是需要做一些前期的準備 遇見的一些問題 1.localStorage 與 sessionStorage...

    henry14 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<