了解过的两种局部刷新页面的技术,不同开发框架下技术使用略有不同,不过都是基于 history.pushState
PJAX
jquery-pjax
pushState + ajax = pjax
jquery-pjax
pushState浏览器兼容性
PS: 看兼容性可以知道,pjax只支持 IE 10和更高版本,因为老版本的IE不支持history.pushState
供参考: PJAX的实现与应用
HTML路由模式
angularjs
$locationProvider.html5Mode(true); //主动启用 HTML5 模式的路由
ui.router 默认要兼容不支持 history.pushState 的浏览器,如 IE 8,要获得类似的能力,就要借助 hash 的 change 事件
如下这篇文章还OK,抄录一下分享给大家:
AngularJs的url有两种模式:hash标签模式和html5模式
hash标签模式
hash标签模式是基于锚点定位的内部链接机制,在URL加上#,然后再在#后面加上hash标签,根据不同的标签做定位,这个不需要服务器端提供支持。例如
html5mode
html5模式则直接使用跟”真实”的url一样,如上面的路径,在html5模式下
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文件的标签下添加
<head>
<base href="/">
...
</head>
这是让angular知道应用的根路径是什么,如果应用的根路径是http://www.example.com/app,那么base设置为
<base href="/app/">
最后页面用的url需要符合html模式,即#xxx,改为/xxx
服务端设置
用户直接在浏览器访问html5模式的url时,url有可能不存在,这时需要在服务器对访问的url做处理。如果访问的url为404,这时需要把url重定向到index
nginx配置
location / {
root /path/to/app;
try_files $uri index.html;
}