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

資訊專(zhuān)欄INFORMATION COLUMN

淺析一波路由的hash 和 history 的區(qū)別與實(shí)現(xiàn)原理以及服務(wù)器刷新404的問(wèn)題及解決方法

APICloud / 3531人閱讀

摘要：滿(mǎn)足單頁(yè)面的需求。的原理略微復(fù)雜一點(diǎn)，它可以通過(guò)去變動(dòng)內(nèi)容，不會(huì)造成頁(yè)面刷新。既然瀏覽器不會(huì)刷新。這樣的話(huà)，就可以做到刷新頁(yè)面不崩的效果。如果有服務(wù)器部署基礎(chǔ)的可以拿此類(lèi)的服務(wù)器試試，我自己這邊是默默地拿著配置成功了

先解釋下基本概念
hash
hash 不是那個(gè)哈希算法，就是以前url用的錨點(diǎn)，以前是多用來(lái)定位頁(yè)面展示內(nèi)容。代表符號(hào)是“#”
之所以用hash是因?yàn)樗瓤梢垣@取到，又可以不去刷新頁(yè)面也不去請(qǐng)求服務(wù)器。滿(mǎn)足單頁(yè)面的需求。
一般寫(xiě)法: 就如說(shuō)我們的思否 https://segmentfault.com/#a/b... 你在控制臺(tái)輸入 window.location.hash，就會(huì)出現(xiàn)#a/b/c/d
history
就是url ，也比如說(shuō)我們的思否,我現(xiàn)在寫(xiě)文章的頁(yè)面 https://segmentfault.com/write，你在瀏覽器輸入 window.location.pathname 就會(huì)輸出 /write，但是單頁(yè)面路由中的url主要目的是用來(lái)存儲(chǔ)路由變量的

基本概念說(shuō)完了，說(shuō)下原理

hash 的原理 比較簡(jiǎn)單粗暴易理解，因?yàn)殄^點(diǎn)本身就是基于單頁(yè)面的一種頁(yè)面定位功能，獲取頁(yè)面的hash值相當(dāng)于可以直接獲取路由的變量，實(shí)現(xiàn)按需加載子頁(yè)面。

history 的原理 略微復(fù)雜一點(diǎn)，它可以通過(guò)history.pushState(state, title, url)去變動(dòng)url 內(nèi)容， 不會(huì)造成頁(yè)面刷新。這里state 可以存一些params值，title 隨便傳值吧目前沒(méi)什么用。url 就是要變動(dòng)的url。既然瀏覽器不會(huì)刷新。那么和hash 就變成一樣的效果了, 但是比hash美觀(guān)。

講一下區(qū)別

hash 是一個(gè)真實(shí)的url，它利用錨點(diǎn)#來(lái)實(shí)現(xiàn)單頁(yè)面，只要錨點(diǎn)前的地址不會(huì)，這個(gè)頁(yè)面就不會(huì)刷新,即便刷新了，也能立即獲取到路由參數(shù)（#后面的內(nèi)容）

history 是一個(gè)虛假的url, 他就像你用代碼去在地址欄敲了url，并且，沒(méi)按回車(chē) 你一旦按了回車(chē)，那基本上就崩了，因?yàn)闉g覽器 會(huì)真的去請(qǐng)求這個(gè)虛假的url。那么自然就崩了。（前端開(kāi)發(fā)的時(shí)候沒(méi)崩是因?yàn)閐ev包把這個(gè)問(wèn)題都解決了，但是生存環(huán)境的服務(wù)器并沒(méi)有去主動(dòng)解決，所以部署以后就崩，所以需要手動(dòng)解決一下）

然后說(shuō)一下history 的解決方法，解決方法有很多，我個(gè)人喜歡重定向的方法。
首先 服務(wù)器將所有的頁(yè)面方面的請(qǐng)求均 重定向 到 初始頁(yè)上面，這樣的話(huà)，url就不至于請(qǐng)求不到頁(yè)面（當(dāng)然嫌麻煩的可以直接把404重定向到初始頁(yè)面）
然后 在前端最外層頁(yè)面寫(xiě)一個(gè)地址解析（一般框架都應(yīng)該有寫(xiě)好，我這里是說(shuō)自己寫(xiě)路由插件），相當(dāng)于獲取到路由所需參數(shù)。

這樣的話(huà)，就可以做到刷新頁(yè)面不崩的效果。

如果有服務(wù)器部署基礎(chǔ)的可以拿nginx此類(lèi)的服務(wù)器試試，我自己這邊是默默地拿著notepad配置成功了......

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/105758.html

相關(guān)文章

  • vue-router實(shí)現(xiàn)原理

    摘要：我們知道是的核心插件，而當(dāng)前項(xiàng)目一般都是單頁(yè)面應(yīng)用，也就是說(shuō)是應(yīng)用在單頁(yè)面應(yīng)用中的。原理是傳統(tǒng)的頁(yè)面應(yīng)用，是用一些超鏈接來(lái)實(shí)現(xiàn)頁(yè)面切換和跳轉(zhuǎn)的其實(shí)剛才單頁(yè)面應(yīng)用跳轉(zhuǎn)原理即實(shí)現(xiàn)原理實(shí)現(xiàn)原理原理核心就是更新視圖但不重新請(qǐng)求頁(yè)面。 近期面試，遇到關(guān)于vue-router實(shí)現(xiàn)原理的問(wèn)題，在查閱了相關(guān)資料后，根據(jù)自己理解，來(lái)記錄下。我們知道vue-router是vue的核心插件，而當(dāng)前vue項(xiàng)目...

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

  • [實(shí)踐系列]-前端路由

    摘要：而應(yīng)用便是基于前端路由實(shí)現(xiàn)的所以便有了前端路由。因?yàn)閮煞N模式都需要調(diào)用一個(gè)方法來(lái)實(shí)現(xiàn)不同路由內(nèi)容的刷新前端路由路由列表匹配當(dāng)前的路由匹配不到則使用配置內(nèi)容并渲染下面我們來(lái)實(shí)現(xiàn)兩種模式。 什么是路由? 路由這概念最開(kāi)始是在后端出現(xiàn)的,在以前前后端不分離的時(shí)候,由后端來(lái)控制路由,服務(wù)器接收客戶(hù)端的請(qǐng)求,解析對(duì)應(yīng)的url路徑,并返回對(duì)應(yīng)的頁(yè)面/資源。 簡(jiǎn)單的說(shuō) 路由就是根據(jù)不同的url地...

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

  • 理解路由

    摘要：服務(wù)器端路由對(duì)于服務(wù)器來(lái)說(shuō)，當(dāng)接收到客戶(hù)端發(fā)來(lái)的請(qǐng)求，會(huì)根據(jù)請(qǐng)求的，來(lái)找到相應(yīng)的映射函數(shù)，然后執(zhí)行該函數(shù)，并將函數(shù)的返回值發(fā)送給客戶(hù)端。客戶(hù)端路由對(duì)于客戶(hù)端通常為瀏覽器來(lái)說(shuō)，路由的映射函數(shù)通常是進(jìn)行一些的顯示和隱藏操作。 原文地址：http://syaning.com/2017/01/10... ? 理解Web路由 1.什么是路由 在Web開(kāi)發(fā)過(guò)程中，經(jīng)常會(huì)遇到『路由』的概念。那么，到...

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

  • 徹底理清前端單頁(yè)面應(yīng)用（SPA）的實(shí)現(xiàn)原理 【精讀源碼】

    showImg(https://segmentfault.com/img/bVbvOmp?w=1612&h=888); 隨著React Vue前端框架的興起，出現(xiàn)了Vue-router,react-router-dom等前端路由管理庫(kù)，利用他們構(gòu)建出來(lái)的單頁(yè)面應(yīng)用，也是越來(lái)越接近原生的體驗(yàn)，再也不是以前的點(diǎn)擊標(biāo)簽跳轉(zhuǎn)頁(yè)面，刷新整個(gè)頁(yè)面了，那么他們的原理是什么呢？ 優(yōu)質(zhì)gitHub開(kāi)源練手項(xiàng)目： ...

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

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

0條評(píng)論

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