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

資訊專欄INFORMATION COLUMN

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

APICloud / 3540人閱讀

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

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

基本概念說完了，說下原理

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

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

講一下區(qū)別

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

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

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

這樣的話，就可以做到刷新頁面不崩的效果。

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

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

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

相關(guān)文章

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

    摘要：我們知道是的核心插件，而當(dāng)前項(xiàng)目一般都是單頁面應(yīng)用，也就是說是應(yīng)用在單頁面應(yīng)用中的。原理是傳統(tǒng)的頁面應(yīng)用，是用一些超鏈接來實(shí)現(xiàn)頁面切換和跳轉(zhuǎn)的其實(shí)剛才單頁面應(yīng)用跳轉(zhuǎn)原理即實(shí)現(xiàn)原理實(shí)現(xiàn)原理原理核心就是更新視圖但不重新請(qǐng)求頁面。 近期面試，遇到關(guān)于vue-router實(shí)現(xiàn)原理的問題，在查閱了相關(guān)資料后，根據(jù)自己理解，來記錄下。我們知道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è)方法來實(shí)現(xiàn)不同路由內(nèi)容的刷新前端路由路由列表匹配當(dāng)前的路由匹配不到則使用配置內(nèi)容并渲染下面我們來實(shí)現(xiàn)兩種模式。 什么是路由? 路由這概念最開始是在后端出現(xiàn)的,在以前前后端不分離的時(shí)候,由后端來控制路由,服務(wù)器接收客戶端的請(qǐng)求,解析對(duì)應(yīng)的url路徑,并返回對(duì)應(yīng)的頁面/資源。 簡單的說 路由就是根據(jù)不同的url地...

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

  • 理解路由

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

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

  • 徹底理清前端單頁面應(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等前端路由管理庫，利用他們構(gòu)建出來的單頁面應(yīng)用，也是越來越接近原生的體驗(yàn)，再也不是以前的點(diǎn)擊標(biāo)簽跳轉(zhuǎn)頁面，刷新整個(gè)頁面了，那么他們的原理是什么呢？ 優(yōu)質(zhì)gitHub開源練手項(xiàng)目： ...

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

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

0條評(píng)論

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