前端如何處理動態url？

01-19

前後端徹底分離的情況下，頁面跳轉頁全部由前端控制。那麼如何更好的處理動態url地址？
例如本問題的url為
https://www.zhihu.com/question/38802932
這肯定是用後台路由處理的url
純前端怎麼處理？
用hash嗎，如下？

https://www.zhihu.com/question#38802932
那如果本頁跳轉，只改變hash的話，頁面不會刷新。
使用
location.reload()
倒是可以解決。
但總覺得這樣處理不夠優雅。大家在工作中是如何處理此類場景的？還是用傳統的後台路由來提供動態url？

謝邀.

其實你問題很簡單了，就是不想用hash進行路由，希望是pathname來描述頁面模塊。你用history api 就可以了， MDN較卡. 你可以直接參考阮一峰的中文介紹: history對象 -- JavaScript 標準參考教程（alpha）

現在常規的路由庫都支持history的方式. 但是往往很多人配置了卻都不知道如何應用，是因為 忘記在前端伺服器配置所有單頁相關的路由都指向單頁的入口頁面。 這樣前端才可以接管路由. 簡單來說就是

/ -&> index.html /blog -&> index.html /blog/2 -&> index.html / ....

想要實際例子理解，可以看下我介紹Regular框架寫的一個單頁的配套例子，example/routing at master · regularjs/example · GitHub , 運行下面的命令就可以有個清晰的認識

npm install npm start

效果

對應的路由的頁面配置

(依賴的路由庫leeluolee/stateman · GitHub 本身是可以從history fallback 到 hashchange 再fallback到低版本ie的輪訓，但是DEMO業務邏輯里只兼容現代瀏覽器)

前端路由並不是只能用 hash

前端路由其實目前來說有兩種方案。

一種是 hash 路由，兼容性強，上到 Chrome，下到 IE6都能搞得定。

另一種是全路徑路由，也就是可以在下面兩種 URL 中無縫切換。相當酷炫有木有，當然兼容性是個硬傷。

https://www.zhihu.com/question/38802932

https://www.zhihu.com/

如何實現捏？

hash 方式就不用說了，太多了。後者則是 HTML5 新出的（已經不新了）History API： pushState。

好了，關鍵詞就這些，可以動手去搜索了。

好問題！

確切說是這個話題非常好。因為你那個具體的問題本身用pjax就可以了。

看過各種類庫的核心api。唯一至今沒有特別好的靈感的就是路由模塊。別的（包括最近的mvvm數據視圖雙向綁定）都已經取長補短，在簡引擎中整合得很好了。

謝邀。

history api?

angularjs是 #/question/1

巧妙用了#

這是問得嘛？好像完全沒理解 HTTP 和網路通信的本質。

舉個例子，你在電腦上怎麼找到你的文件？當然是通過路徑名　/usr/local/my.txt。網路也是一樣。

https://www.zhihu.com/question/38802932

www.zhihu.com定位到你的伺服器，/question/38802932 定位你在伺服器的資源。

你可以任意設定/question.38802932 的內容：

偽代碼：

set

get /question/38802932 =&> response "hello 38802932"

get /question/10061 =&> response /usr/local/my.txt

這跟前端木有半點關係。對於前端：

window.location = "/question/38802932" 表示向伺服器發送　get /question/38802932 請求，至於返回來的是什麼，那是伺服器定義的。我可以返回 404，我也可以返回一個「hello world」。

history.pushState

history.replaceState

push了瀏覽器就能後退，replace不能

用push的話後退時還需要配合ajax做些操作，不然後退了頁面沒變化

首先，現在有個瀏覽器對象叫history。

其次，hash變化是可以監聽事件的。