了解过的两种局部刷新页面的技术，不同开发框架下技术使用略有不同，不过都是基于 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标签，根据不同的标签做定位，这个不需要服务器端提供支持。例如

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

html5mode

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文件的标签下添加

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

HTML5路由和PJAX相关推荐

处理ASP.NET Core中的HTML5客户端路由回退
在使用由Angular,React,Vue等应用程序框架构建的客户端应用程序时,您总是会处理HTML5客户端路由,它将完全在浏览器中处理到页面和组件的客户端路由.几乎完全在浏览器中... HTML5客 ...
angularjs pdf插件_AngularJS权威教程 PDF扫描版[14MB]
AngularJS权威教程是学习AngularJS的公认经典,内容全面,讲解通俗,适合各层次的学习者.作者拥有丰富的AngularJS开发和教学经验,也是一位全栈工程师.全书35章,由浅入深地讲解了A ...
Angular4 去掉url中的#，并解决刷新时的404问题
为什么要去除? Angular官方指出:如果没有足够使用hash风格(#)的理由,还是尽量使用HTML5模式的路由风格: 如果配置了hash风格,在微信支付或是Angular的深路径依然会出404的问 ...
html5怎么改为vue_【面试需要Vue全家桶】一文带你看透Vue前端路由
作者 | Jeskson 掘金 | https://juejin.im/user/5a16e1f3f265da43128096cb 2020.1.11 背景介绍 vue router是vue.js ...
PJAX初体验（主要是利用HTML5 新增API pushState和replaceState+AJAX）
说在前面什么是PJAX呢? 站在应用角度的就是既实现了页面无刷新的效果,同时也产生了浏览器的前进和后退,而且url也会变化. 也不是什么新鲜技术,主要是AJAX+html5 pushState和re ...
html5 pjax,pjax——页面无刷新跳转
pjax虽然不是什么新的技术,然而本人是最近才发现这个比较牛叉的技术.下面是对pjax的介绍: pjax是在HTML5里面引用的新技术,是对ajax + pushState的封装,是实现无刷新ajax ...
html5怎么查看路由器状态,怎么看路由器是否正常_怎么看路由器是否联网?-192路由网...
今天这篇文章,主要介绍了怎么查看路由器的联网状态是否正常. 对于很多新手用户来说,经常会遇到设置路由器后不能上网的问题. 当我们遇到路由器不能上网的时候,首先应该做的就是登录到路由器的设置页面,查看下 ...
html5 pjax,关于PJAX局部刷新
前言部分本教程最先来自鬼少博客,后论坛有人补充搜索和评论,然后又被各种转载,转完甚至还有阉割现象,导致会出现各种问题,于是,我这里再重发一次.虽然注释很清楚,但是,还有很多人看不懂,所以,我这里做了 ...
html5跳转WiFi设置,如何进入wifi管理界面_如何进入wifi设置界面？-192路由网
在本文中,鸿哥给大家介绍,用电脑怎么进入wifi路由器设置页面,并对wifi路由器进行相关的设置. 平时经常有些用户找到鸿哥,问我怎么才能进入wifi管理界面? 原因是这些用户中,很多新手用户是完全不 ...

HTML5路由和PJAX