HTML5路由和PJAX

简介: 了解过的两种局部刷新页面的技术,不同开发框架下技术使用略有不同,不过都是基于 history.pushStatePJAXjquery-pjax pushState + ajax = pjaxjquery-pjaxpushState浏览器兼容性PS: 看兼容性可以知道,pjax只支持 IE 10和更高版本,因为老版本的IE不支持hist

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

PJAX

jquery-pjax

pushState + ajax = pjax

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模式下

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知道应用的根路径是什么,如果应用的根路径是,那么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;
}
目录
相关文章
|
移动开发 前端开发 API
React路由和HTML5 History API有什么区别
【8月更文挑战第11天】React路由和HTML5 History API有什么区别
315 1
|
前端开发 JavaScript 开发者
HackerNews02-根据不同路由响应不同的 HTML 页面|学习笔记
快速学习 HackerNews02-根据不同路由响应不同的 HTML 页面
HackerNews02-根据不同路由响应不同的 HTML 页面|学习笔记
|
前端开发 JavaScript 开发者
HackerNews02-根据不同路由响应不同的HTML页面|学习笔记
快速学习 HackerNews02-根据不同路由响应不同的HTML页面
HackerNews02-根据不同路由响应不同的HTML页面|学习笔记
html+css实战22-综合案例-跳转路由
html+css实战22-综合案例-跳转路由
247 0
html+css实战23-综合路由-跳转其他页面
html+css实战23-综合路由-跳转其他页面
371 0
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
1027 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
955 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
333 34
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
1296 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布