當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML5路由和PJAX

發布時間：2025/5/22 HTML 128 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML5路由和PJAX 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

了解過的兩種局部刷新頁面的技術，不同開發框架下技術使用略有不同，不過都是基于 history.pushState

jquery-pjax

pushState + ajax = pjax

PS: 看兼容性可以知道，pjax只支持 IE 10和更高版本，因為老版本的IE不支持history.pushState

供參考: PJAX的實現與應用

angularjs

$locationProvider.html5Mode(true); //主動啟用 HTML5 模式的路由

ui.router 默認要兼容不支持 history.pushState 的瀏覽器，如 IE 8，要獲得類似的能力，就要借助 hash 的 change 事件

如下這篇文章還OK，抄錄一下分享給大家：

AngularJs的url有兩種模式：hash標簽模式和html5模式

hash標簽模式是基于錨點定位的內部鏈接機制，在URL加上#，然后再在#后面加上hash標簽，根據不同的標簽做定位，這個不需要服務器端提供支持。例如

http://www.example.com/#user

html5模式則直接使用跟”真實”的url一樣，如上面的路徑，在html5模式下

http://www.example.com/user

html5模式的url分兩種訪問方式

在瀏覽器直接輸入這個路徑訪問，瀏覽器端會向服務器端請求加載頁面。

在angular應用內訪問html5模式url，angular應用在客戶端直接路由到對應的視圖，不需要重新加載頁面。

在html5模式下，angular使用了html5的pushState API 來改變瀏覽器的url而不用重新加載頁面。

html5mode需要對客戶端和服務器端做設置

客戶端配置

設置$locationProvider.html5Mode為true啟用html5模式。

angular.module('app').config(function($locationProvider) {$locationProvider.html5Mode(true); });

在index.html文件的標簽下添加

這是讓angular知道應用的根路徑是什么，如果應用的根路徑是http://www.example.com/app，那么base設置為

最后頁面用的url需要符合html模式，即#xxx，改為/xxx

服務端設置

用戶直接在瀏覽器訪問html5模式的url時，url有可能不存在，這時需要在服務器對訪問的url做處理。如果訪問的url為404，這時需要把url重定向到index

nginx配置

location / {root /path/to/app;try_files $uri index.html; }

以上是生活随笔為你收集整理的HTML5路由和PJAX的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。