AngularJS通过$location获取及改变当前页面的URL


Posted in Javascript onSeptember 23, 2016

注意

本文中获取与修改的URL以 ‘http://172.16.0.88:8100/#/homePage?id=10&a=100' 这个路径为例:

一. 获取url的相关方法(不修改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的相关方法(改变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,如果不想要这种效果,而仅仅是替换当前的记录,可以使用  $location.path('/validation').replace();

总结

以上就是关于AngularJS通过$location获取及改变当前页面URL的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助。如果有疑问大家可以留言交流。

Javascript 相关文章推荐
js数值计算时使用parseInt进行数据类型转换(jquery)
Oct 07 Javascript
js获取元素外链样式的方法
Jan 27 Javascript
创建自己的jquery表格插件
Nov 25 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
使用vue.js编写蓝色拼图小游戏
Mar 17 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
Apr 10 Javascript
JS实现上传图片实时预览功能
May 22 Javascript
浅谈ES6 模板字符串的具体使用方法
Nov 07 Javascript
详解离线安装npm包的几种方法
Nov 25 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
Dec 29 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
Feb 22 Javascript
node 解析图片二维码的内容代码实例
Sep 11 Javascript
AngularJS监听路由的变化示例代码
Sep 23 #Javascript
同步异步动态引入js文件的几种方法总结
Sep 23 #Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
Sep 23 #Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
Sep 23 #Javascript
form表单转Json提交的方法(推荐)
Sep 23 #Javascript
关于验证码在IE中不刷新的快速解决方法
Sep 23 #Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
Sep 23 #Javascript
You might like
smarty模板引擎之分配数据类型
2015/03/30 PHP
js基于qrcode.js生成二维码的方法【附demo插件源码下载】
2016/12/28 PHP
php 中的closure用法详解
2017/06/12 PHP
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
2009/12/09 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
2014/06/05 Javascript
Iframe实现跨浏览器自适应高度解决方法
2014/09/02 Javascript
JavaScript实现仿网易通行证表单验证
2015/05/25 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
javascript实现简单查找与替换的方法
2015/07/22 Javascript
js实现砖头在页面拖拉效果
2020/11/20 Javascript
TypeScript学习之强制类型的转换
2016/12/27 Javascript
微信小程序多列选择器range-key使用详解
2020/03/30 Javascript
vue-cli项目中使用Mockjs详解
2018/05/14 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
2019/05/14 Javascript
JS控制下拉列表左右选择实例代码
2020/05/08 Javascript
Vue 封装防刷新考试倒计时组件的实现
2020/06/05 Javascript
Python IDLE入门简介
2017/12/08 Python
Python定义二叉树及4种遍历方法实例详解
2018/07/05 Python
numpy.random模块用法总结
2019/05/27 Python
python多线程+代理池爬取天天基金网、股票数据过程解析
2019/08/13 Python
python脚本调用iftop 统计业务应用流量的思路详解
2019/10/11 Python
python 实现视频 图像帧提取
2019/12/10 Python
opencv python如何实现图像二值化
2020/02/03 Python
美国Lolё官网:购买大胆而美丽的女性运动服装
2017/05/22 全球购物
PHP面试题及答案二
2015/05/23 面试题
婚礼证婚人证婚词
2014/01/08 职场文书
小学生检讨书大全
2014/02/06 职场文书
读书之星事迹材料
2014/05/12 职场文书
环保标语大全
2014/06/12 职场文书
工程部部长岗位职责
2015/02/12 职场文书
汽车4S店前台接待岗位职责
2015/04/03 职场文书
信用卡催款律师函
2015/05/27 职场文书
初中班级口号霸气押韵
2015/12/24 职场文书
职工的安全责任书范文!
2019/07/02 职场文书
上帝为你开了一扇窗之Tkinter常用函数详解
2021/06/02 Python
浅谈GO中的Channel以及死锁的造成
2022/03/18 Golang