Angular 通过注入 $location 获取与修改当前页面URL的实例


Posted in Javascript onMay 31, 2017

以下获取与修改的 URL 以 ( http://172.16.0.88:8100/#/homePage?id=10&a=100 ) 为例

【一】获取 (不修改URL)

//1.获取当前完整的url路径 
var absurl = $location.absUrl(); 
//http://172.16.0.88:8100/#/homePage?id=10&a=100
//2. 获取当前url路径(当前url#后面的内容,包括参数和哈希值): 
var url = $location.url(); 
// 结果:/homePage?id=10&a=100
//3. 获取当前url的子路径(也就是当前url#后面的内容,不包括参数) 
var pathUrl = $location.path() 
//结果:/homePage
//4.获取当前url的协议(比如http,https) 
var protocol = $location.protocol(); 
//结果:http
//5.获取主机名 
var localhost = $location.host(); 
//结果:172.16.0.88
//6.获取当前url的端口 
var port = $location.port(); 
//结果:8100
//7.获取当前url的哈希值 
var hash = $location.hash() 
//结果:http://172.16.088
//8.获取当前url的参数的序列化json对象 
var search = $location.search(); 
//结果:{id: “10”, a: “100”}

【二】修改 (改变URL相关内容)

//1 修改url的子路径部分(也就是当前url#后面的内容,不包括参数): 
$location.url(‘/validation'); 
//结果:http://172.16.0.88:8100/#/validation
//2 修改url的哈希值部分 
$location.hash(‘myhash3'); 
//结果:http://172.16.0.88:8100/#/homePage?id=10&a=100#myhash3
//3 修改url的参数部分(第一个参数表示url参数的属性名,第二个参数是该属性名的属性值,如果是已有属性名,则修改,如果不是已有属性,则新增) 
$location.search(‘id','111') 
// 结果(修改参数值):http://172.16.0.88:8100/#/homePage?id=111&a=100
$location.search(‘ids','111') 
// 结果(新增ids参数): http://172.16.0.88:8100/#/homePage?id=111&a=100&ids=111
//4.一次性修改多个参数 
$location.search({id:'55','a':'66'}) 
//结果:http://172.16.0.88:8100/#/homePage?id=55&a=66#myhash3
//5.第一个值表示url参数的属性名,如果是已有属性名,则删除该属性,如果不是已有属性,那就等于没改过 
$location.search(‘age',null)

【三】修改URL但不存入历史记录

       在上面的修改url的方法的时候,每修改一次,url都会被存入历史记录,可以使用后退按钮回到修改前的url,如果不想要这种效果,而仅仅是替换当前的记录,

Javascript 相关文章推荐
飞鱼(shqlsl) javascript作品集
Dec 16 Javascript
JS类的封装及实现代码
Dec 02 Javascript
javascript实现div的显示和隐藏的小例子
Jun 25 Javascript
js验证整数加保留小数点的简单实例
Dec 02 Javascript
js实现仿京东2级菜单效果(带延时功能)
Aug 27 Javascript
node.js cookie-parser 中间件介绍
Jun 06 Javascript
JavaScript数组操作函数汇总
Aug 05 Javascript
聊一聊jQuery插件uploadify使用方法
Aug 24 Javascript
fullCalendar中文API官方文档
Feb 07 Javascript
基于javascript的异步编程实例详解
Apr 10 Javascript
Bootstrap实现省市区三级联动(亲测可用)
Jul 26 Javascript
javascript实现计算器功能
Mar 30 Javascript
使用原生js写ajax实例(推荐)
May 31 #Javascript
Javascript创建类和对象详解
May 31 #Javascript
Javascript继承机制详解
May 30 #Javascript
Vue2.x中的Render函数详解
May 30 #Javascript
jQuery实现动态删除LI的方法
May 30 #jQuery
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
May 30 #Javascript
JS给按钮添加跳转功能类似a标签
May 30 #Javascript
You might like
关于我转生变成史莱姆这档事:第二季PV上线,萌王2021年回归
2020/05/06 日漫
新手学PHP之数据库操作详解及乱码解决!
2007/01/02 PHP
PHP最常用的2种设计模式工厂模式和单例模式介绍
2012/08/14 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
PHP性能分析工具XHProf安装使用教程
2015/05/13 PHP
PHP实现发送邮件的方法(基于简单邮件发送类)
2015/12/17 PHP
WordPress中给媒体文件添加分类和标签的PHP功能实现
2015/12/31 PHP
PHP中list()函数用法实例简析
2016/01/08 PHP
在TP5数据库中四个字段实现无限分类的示例
2019/10/18 PHP
PHP设计模式(六)桥连模式Bridge实例详解【结构型】
2020/05/02 PHP
用javascript操作xml
2006/11/04 Javascript
Table冻结表头示例代码
2013/08/20 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
JS实现可展开折叠层的鼠标拖曳效果
2015/10/09 Javascript
利用js判断手机是否安装某个app的多种方案
2017/02/13 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
Angualrjs和bootstrap相结合实现数据表格table
2017/03/30 Javascript
Mac下安装vue
2018/04/11 Javascript
JS内部事件机制之单线程原理
2018/07/02 Javascript
[06:45]DOTA2-DPC中国联赛 正赛 Magma vs LBZS 选手采访
2021/03/11 DOTA
详解在Python和IPython中使用Docker
2015/04/28 Python
python下MySQLdb用法实例分析
2015/06/08 Python
Python实现统计代码行的方法分析
2017/07/12 Python
python密码错误三次锁定(实例讲解)
2017/11/14 Python
python2.6.6如何升级到python2.7.14
2018/04/08 Python
解决pandas 作图无法显示中文的问题
2018/05/24 Python
查看TensorFlow checkpoint文件中的变量名和对应值方法
2018/06/14 Python
postman模拟访问具有Session的post请求方法
2019/07/15 Python
分享PyCharm的几个使用技巧
2019/11/10 Python
python使用建议与技巧分享(一)
2020/08/17 Python
python模块内置属性概念及实例
2021/02/18 Python
UNIX文件系统分类
2014/11/11 面试题
购房协议书
2014/04/11 职场文书
门卫管理制度范本
2015/08/05 职场文书
新年祝酒词大全
2015/08/11 职场文书
Mysql数据库group by原理详解
2022/07/07 MySQL