資訊專欄INFORMATION COLUMN
摘要：滿足單頁面的需求。的原理略微復(fù)雜一點，它可以通過去變動內(nèi)容，不會造成頁面刷新。既然瀏覽器不會刷新。這樣的話，就可以做到刷新頁面不崩的效果。如果有服務(wù)器部署基礎(chǔ)的可以拿此類的服務(wù)器試試，我自己這邊是默默地拿著配置成功了
先解釋下基本概念
hash
hash 不是那個哈希算法，就是以前url用的錨點，以前是多用來定位頁面展示內(nèi)容。代表符號是“#”
之所以用hash是因為他既可以獲取到，又可以不去刷新頁面也不去請求服務(wù)器。滿足單頁面的需求。
一般寫法: 就如說我們的思否 https://segmentfault.com/#a/b... 你在控制臺輸入 window.location.hash，就會出現(xiàn)#a/b/c/d
history
就是url ，也比如說我們的思否,我現(xiàn)在寫文章的頁面 https://segmentfault.com/write，你在瀏覽器輸入 window.location.pathname 就會輸出 /write，但是單頁面路由中的url主要目的是用來存儲路由變量的
基本概念說完了，說下原理
hash 的原理 比較簡單粗暴易理解，因為錨點本身就是基于單頁面的一種頁面定位功能，獲取頁面的hash值相當(dāng)于可以直接獲取路由的變量，實現(xiàn)按需加載子頁面。
history 的原理 略微復(fù)雜一點，它可以通過history.pushState(state, title, url)去變動url 內(nèi)容， 不會造成頁面刷新。這里state 可以存一些params值，title 隨便傳值吧目前沒什么用。url 就是要變動的url。既然瀏覽器不會刷新。那么和hash 就變成一樣的效果了, 但是比hash美觀。
講一下區(qū)別
hash 是一個真實的url，它利用錨點#來實現(xiàn)單頁面，只要錨點前的地址不會，這個頁面就不會刷新,即便刷新了，也能立即獲取到路由參數(shù)（#后面的內(nèi)容）
history 是一個虛假的url, 他就像你用代碼去在地址欄敲了url，并且，沒按回車 你一旦按了回車，那基本上就崩了，因為瀏覽器 會真的去請求這個虛假的url。那么自然就崩了。（前端開發(fā)的時候沒崩是因為dev包把這個問題都解決了，但是生存環(huán)境的服務(wù)器并沒有去主動解決，所以部署以后就崩，所以需要手動解決一下）
然后說一下history 的解決方法，解決方法有很多，我個人喜歡重定向的方法。
首先 服務(wù)器將所有的頁面方面的請求均 重定向 到 初始頁上面，這樣的話，url就不至于請求不到頁面（當(dāng)然嫌麻煩的可以直接把404重定向到初始頁面）
然后 在前端最外層頁面寫一個地址解析（一般框架都應(yīng)該有寫好，我這里是說自己寫路由插件），相當(dāng)于獲取到路由所需參數(shù)。
這樣的話，就可以做到刷新頁面不崩的效果。
如果有服務(wù)器部署基礎(chǔ)的可以拿nginx此類的服務(wù)器試試，我自己這邊是默默地拿著notepad配置成功了......
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/105758.html
摘要：我們知道是的核心插件，而當(dāng)前項目一般都是單頁面應(yīng)用，也就是說是應(yīng)用在單頁面應(yīng)用中的。原理是傳統(tǒng)的頁面應(yīng)用，是用一些超鏈接來實現(xiàn)頁面切換和跳轉(zhuǎn)的其實剛才單頁面應(yīng)用跳轉(zhuǎn)原理即實現(xiàn)原理實現(xiàn)原理原理核心就是更新視圖但不重新請求頁面。 近期面試，遇到關(guān)于vue-router實現(xiàn)原理的問題，在查閱了相關(guān)資料后，根據(jù)自己理解，來記錄下。我們知道vue-router是vue的核心插件，而當(dāng)前vue項目...
摘要：而應(yīng)用便是基于前端路由實現(xiàn)的所以便有了前端路由。因為兩種模式都需要調(diào)用一個方法來實現(xiàn)不同路由內(nèi)容的刷新前端路由路由列表匹配當(dāng)前的路由匹配不到則使用配置內(nèi)容并渲染下面我們來實現(xiàn)兩種模式。 什么是路由? 路由這概念最開始是在后端出現(xiàn)的,在以前前后端不分離的時候,由后端來控制路由,服務(wù)器接收客戶端的請求,解析對應(yīng)的url路徑,并返回對應(yīng)的頁面/資源。 簡單的說 路由就是根據(jù)不同的url地...
閱讀 990·2021-10-13 09:48
閱讀 4033·2021-09-22 10:53
閱讀 3192·2021-08-30 09:41
閱讀 2001·2019-08-30 15:55
閱讀 2975·2019-08-30 15:55
閱讀 1911·2019-08-30 14:11
閱讀 2258·2019-08-29 13:44
閱讀 830·2019-08-26 12:23
