亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

vue先hash 模式部署項(xiàng)目，然后開(kāi)啟histroy模式 ，引發(fā)的幾個(gè)問(wèn)題以及histroy模式的

Imfan / 662人閱讀

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

前言：

vue路由有一個(gè)HTML5 History 模式,這個(gè)模式要在路由里面另外開(kāi)啟的，很多人在剛使用路由的時(shí)候之前不知道這個(gè)模式，所以并沒(méi)有啟用，然后就把項(xiàng)目部署上去了，因?yàn)檫@個(gè)模式還是有挺多優(yōu)點(diǎn)的，最后還是會(huì)開(kāi)啟這個(gè)模式。

然而因?yàn)?strong>之前使用hash模式再改為histroy模式還是有些問(wèn)題的，我已經(jīng)踩過(guò)坑了，然后把這幾個(gè)問(wèn)題寫出來(lái)。有需要的朋友可以做一下參考，喜歡的可以點(diǎn)波贊，或者關(guān)注一下，希望可以幫到大家。

本文首發(fā)于我的個(gè)人blog：obkoro1.com
開(kāi)啟history模式：

如果不開(kāi)啟的話，路由默認(rèn)是hash模式，開(kāi)啟這個(gè)模式前端的工作也很簡(jiǎn)單，如下：

    mode: "history" //在路由那里配置一下這個(gè)

最后需要后端的做一些配置配合，這里可以參考一下文檔給的栗子。

history模式的優(yōu)點(diǎn):

url變成真正的url，url看上去更好看。

http://yoursite.com/#/a/b //hash模式
http://yoursite.com/a/b //history模式

可以使用vue-router的滾動(dòng)行為，這個(gè)用來(lái)記憶進(jìn)入其他頁(yè)面之前的位置非常好用，配置一下就可以直接使用了，前提是開(kāi)啟histroy模式。

類似項(xiàng)目引入微信js-sdk的時(shí)候，一些操作是對(duì)url是有要求，url不能帶上"#"，如果沒(méi)有開(kāi)啟histroy模式，很可能會(huì)導(dǎo)致問(wèn)題。

像vue-cli的配置，都是以路由開(kāi)啟history模式的標(biāo)準(zhǔn)來(lái)配置的（下面會(huì)講到一個(gè)栗子），沒(méi)有開(kāi)啟的話，自己要另外配置。

先hash模式，后histroy模式

就像開(kāi)頭說(shuō)的，這里的問(wèn)題指的是：先用hash模式部署項(xiàng)目到線上，然后再開(kāi)啟histroy模式，由此引發(fā)的一些問(wèn)題。

1.找不到資源問(wèn)題：

在hash模式下面，直接打包的話，會(huì)導(dǎo)致找不到css、js和圖片資源，然后經(jīng)過(guò)百度之后，做出了如下截圖的配置操作，更改assetsPublicPath："/"為 assetsPublicPath："./"

在hash模式下，像上面那么配置就沒(méi)有問(wèn)題了。當(dāng)時(shí)我還以為vue-cli配置有問(wèn)題，實(shí)際上，人家才沒(méi)有問(wèn)題呢，是我們自己沒(méi)有開(kāi)啟history模式的問(wèn)題。

然后開(kāi)啟了histroy模式之后，因?yàn)槲覀冎案牧薬ssetsPublicPath屬性，所以要把那個(gè).給去掉，改回來(lái)：assetsPublicPath："/"

2.請(qǐng)求帶上路由，導(dǎo)致請(qǐng)求失敗 正確的請(qǐng)求是： 
    http:www.xxx.com/api/接口 //api是我通過(guò)proxyTable轉(zhuǎn)發(fā)地址的代理名字
開(kāi)啟histroy模式之后：

在二層的路由里面會(huì)出現(xiàn)這種情況：

    路由是：http:www.xxx.com/a/b
    http:www.xxx.com/api/a/接口 //這就導(dǎo)致了請(qǐng)求失敗，要把a(bǔ)也去掉才是正確的

解決方式是：

因?yàn)槲矣玫氖莂xios，所以可以在全局請(qǐng)求中設(shè)置一個(gè)baseURL，這個(gè)baseURL就是項(xiàng)目的網(wǎng)站地址（http:www.xxx.com）,然后二層的路由也會(huì)自動(dòng)去掉前面的a和b。

3.cookie問(wèn)題

這個(gè)實(shí)際上不是個(gè)問(wèn)題，完全是自己作的，我把項(xiàng)目分為兩層。所以從a登錄，b那邊刷新就會(huì)出現(xiàn)沒(méi)有cookie的情況。

    兩層路由
    http://yoursite.com/a
    http://yoursite.com/b

這里是因?yàn)閏ookie能否拿到跟存儲(chǔ)的路由位置是有關(guān)的，之前使用hash模式因?yàn)閔ash模式的urlhttp://yoursite.com/#/a/b，會(huì)統(tǒng)一存在http://yoursite.com下面。

而history模式cookie就會(huì)存在http://yoursite.com/a或者http://yoursite.com/b下面，另外一邊就會(huì)沒(méi)有cookiie。

解決辦法：

不要分為兩層，統(tǒng)一所有的路由都在一個(gè)路由地址下面。

在項(xiàng)目的路由的根地址path:"/"里面存cookie。

使用sessionStorage存信息，我就是用這個(gè)方法，使用方法。

sessionStorage只要在http://yoursite.com都可以訪問(wèn)的到，不管是存在a上面還是b上面。

后話

以上就是本文的所有內(nèi)容，建議項(xiàng)目一開(kāi)始還是直接跟后端說(shuō)一下，開(kāi)啟histroy模式，省得后面的種種坑。上面的內(nèi)容都是本人親自踩坑之后的血淚教訓(xùn)，希望可以幫助到需要的朋友，然后祝大家圣誕節(jié)快樂(lè)。

最后：如需轉(zhuǎn)載，請(qǐng)放上原文鏈接并署名。碼字不易，感謝支持！本人寫文章本著交流記錄的心態(tài)，寫的不好之處，不撕逼，但是歡迎指點(diǎn)。然后就是希望看完的朋友點(diǎn)個(gè)喜歡，也可以關(guān)注一下我。
個(gè)人blog and 掘金個(gè)人主頁(yè)

以上2017.12.25

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/90410.html

相關(guān)文章

  • [使用 Weex 和 Vue 開(kāi)發(fā)原生應(yīng)用] 6 使用 vue-router

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

    leonardofed 評(píng)論0 收藏0

  • 容易忽略的URL

    摘要：場(chǎng)景再現(xiàn)眾所周知，有三種模式，一般的前端項(xiàng)目中會(huì)選擇模式進(jìn)行開(kāi)發(fā)，最近做了一個(gè)運(yùn)營(yíng)活動(dòng)就是基于的模式進(jìn)行開(kāi)發(fā)的。項(xiàng)目注冊(cè)了兩個(gè)路由抽象出來(lái)的入口頁(yè)面需要參數(shù)，所以提供瀏覽器里輸入回車后，頁(yè)面自動(dòng)增加一個(gè)變?yōu)椤? 場(chǎng)景再現(xiàn) 眾所周知，vue-router有三種模式 ：hash、html5、abstract ， 一般的前端項(xiàng)目中會(huì)選擇hash模式進(jìn)行開(kāi)發(fā)，最近做了一個(gè)運(yùn)營(yíng)活動(dòng)就是基于vue-...

    CoyPan 評(píng)論0 收藏0

  • 容易忽略的URL

    摘要：場(chǎng)景再現(xiàn)眾所周知，有三種模式，一般的前端項(xiàng)目中會(huì)選擇模式進(jìn)行開(kāi)發(fā)，最近做了一個(gè)運(yùn)營(yíng)活動(dòng)就是基于的模式進(jìn)行開(kāi)發(fā)的。項(xiàng)目注冊(cè)了兩個(gè)路由抽象出來(lái)的入口頁(yè)面需要參數(shù)，所以提供瀏覽器里輸入回車后，頁(yè)面自動(dòng)增加一個(gè)變?yōu)椤? 場(chǎng)景再現(xiàn) 眾所周知，vue-router有三種模式 ：hash、html5、abstract ， 一般的前端項(xiàng)目中會(huì)選擇hash模式進(jìn)行開(kāi)發(fā)，最近做了一個(gè)運(yùn)營(yíng)活動(dòng)就是基于vue-...

    Richard_Gao 評(píng)論0 收藏0

  • 關(guān)于網(wǎng)頁(yè)本地存儲(chǔ)的一些思考

    摘要：于是一個(gè)擁有版本控制和過(guò)期控制的本地內(nèi)容存儲(chǔ)功能模塊就算初步完成了。最后基于這個(gè)事情的考慮，于是順便寫了個(gè)本地存儲(chǔ)控制的庫(kù)，基本都在上面了 前言 關(guān)于localStorage sessionStorage之類的api怎么用已經(jīng)無(wú)需我再贅述了，但是具體怎么落實(shí)到一個(gè)稍微復(fù)雜一些的業(yè)務(wù)中還是需要做一些前期的準(zhǔn)備 遇見(jiàn)的一些問(wèn)題 1.localStorage 與 sessionStorage...

    陳江龍 評(píng)論0 收藏0

  • 關(guān)于網(wǎng)頁(yè)本地存儲(chǔ)的一些思考

    摘要：于是一個(gè)擁有版本控制和過(guò)期控制的本地內(nèi)容存儲(chǔ)功能模塊就算初步完成了。最后基于這個(gè)事情的考慮，于是順便寫了個(gè)本地存儲(chǔ)控制的庫(kù)，基本都在上面了 前言 關(guān)于localStorage sessionStorage之類的api怎么用已經(jīng)無(wú)需我再贅述了，但是具體怎么落實(shí)到一個(gè)稍微復(fù)雜一些的業(yè)務(wù)中還是需要做一些前期的準(zhǔn)備 遇見(jiàn)的一些問(wèn)題 1.localStorage 與 sessionStorage...

    henry14 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<