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 相关文章推荐
JS中数组Array的用法示例介绍
Feb 20 Javascript
js对象的复制继承实例
Jan 10 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
Nov 26 Javascript
Javascript实现的SHA-256加密算法完整实例
Feb 02 Javascript
浅析JSONP技术原理及实现
Jun 08 Javascript
基于jPlayer三分屏的制作方法
Dec 21 Javascript
利用types增强vscode中js代码提示功能详解
Jul 07 Javascript
js图片上传的封装代码
Aug 01 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
Vue Router的手写实现方法实现
Mar 02 Javascript
JavaScript进阶(三)闭包原理与用法详解
May 09 Javascript
js实现购物车商品数量加减
Sep 21 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
PHP的SQL注入实现(测试代码安全不错)
2011/02/27 PHP
php多文件上传下载示例分享
2014/02/20 PHP
php生成随机密码自定义函数代码(简单快速)
2014/05/10 PHP
php实现无限级分类(递归方法)
2015/08/06 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
PHP 代码简洁之道(小结)
2019/10/16 PHP
避免 showModalDialog 弹出新窗体的原因分析
2010/05/31 Javascript
createElement与createDocumentFragment的点点区别小结
2011/12/19 Javascript
Javascript中的call()方法介绍
2015/03/15 Javascript
javascript:void(0)点击登录没反应怎么解决
2015/11/13 Javascript
javascript性能优化之事件委托实例详解
2015/12/12 Javascript
Centos7 中 Node.js安装简单方法
2016/11/02 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
2016/11/23 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
2017/06/19 Javascript
vue通过cookie获取用户登录信息的思路详解
2018/10/30 Javascript
JS选取DOM元素常见操作方法实例分析
2018/12/10 Javascript
小程序分享链接onShareAppMessage的具体用法
2020/05/22 Javascript
python常规方法实现数组的全排列
2015/03/17 Python
Python 3中的yield from语法详解
2017/01/18 Python
Django 生成登陆验证码代码分享
2017/12/12 Python
python八皇后问题的解决方法
2018/09/27 Python
python turtle库画一个方格和圆实例
2019/06/27 Python
Python实现隐马尔可夫模型的前向后向算法的示例代码
2019/12/31 Python
Python3与fastdfs分布式文件系统如何实现交互
2020/06/23 Python
Tenstickers法国:墙贴和装饰贴纸
2019/08/26 全球购物
物流专业大学的自我评价
2014/01/11 职场文书
十八届三中全会学习方案
2014/02/16 职场文书
竞选生活委员演讲稿
2014/04/28 职场文书
教师业务培训方案
2014/05/01 职场文书
负责人任命书范本
2014/06/04 职场文书
班组拓展活动方案
2014/08/14 职场文书
党的群众路线教育实践活动个人对照检查材料(乡镇)
2014/11/05 职场文书
辞职书格式样本
2015/02/26 职场文书
小学英语教学经验交流材料
2015/11/02 职场文书
大学班长竞选稿
2015/11/20 职场文书
Vue实现跑马灯样式文字横向滚动
2021/11/23 Vue.js