HTML5路由和PJAX

最新推荐文章于 2023-09-20 11:49:28 发布

weixin_34314962

最新推荐文章于 2023-09-20 11:49:28 发布

阅读量164

点赞数

文章标签：前端 javascript ui ViewUI

原文链接：https://yq.aliyun.com/articles/74024

版权

了解过的两种局部刷新页面的技术，不同开发框架下技术使用略有不同，不过都是基于 history.pushState

PJAX

jquery-pjax

pushState + ajax = pjax

pjax

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

angularjs

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

ui.router 默认要兼容不支持 history.pushState 的浏览器，如 IE 8，要获得类似的能力，就要借助 hash 的 change 事件

如下这篇文章还OK，抄录一下分享给大家：

hash标签模式是基于锚点定位的内部链接机制，在URL加上#，然后再在#后面加上hash标签，根据不同的标签做定位，这个不需要服务器端提供支持。例如

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;
}

关注