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 相关文章推荐
javascript+dom树型菜单类,希望朋友们一起进步
May 03 Javascript
实现连缀调用的map方法(prototype)
Aug 05 Javascript
避免 showModalDialog 弹出新窗体的原因分析
May 31 Javascript
Javascript实现重力弹跳拖拽运动效果示例
Jun 28 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
Aug 28 Javascript
JavaScript 实现打印,打印预览,打印设置
Dec 30 Javascript
jQuery实现统计输入文字个数的方法
Mar 11 Javascript
初识Node.js
Mar 20 Javascript
AngularJS表单详解及示例代码
Aug 17 Javascript
JavaScript获取URL中参数querystring的方法详解
Oct 11 Javascript
Bootstrap table 定制提示语的加载过程
Feb 20 Javascript
vue + element-ui实现简洁的导入导出功能
Dec 22 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制作新闻系统的思路
2006/10/09 PHP
thinkphp实现多语言功能(语言包)
2014/03/04 PHP
PHP统计nginx访问日志中的搜索引擎抓取404链接页面路径
2014/06/30 PHP
php实现curl模拟ftp上传的方法
2015/07/29 PHP
最新制作ThinkPHP3.2.3完全开发手册
2015/11/23 PHP
php打包网站并在线压缩为zip
2016/02/13 PHP
PHP使用file_get_content设置头信息的方法
2016/02/14 PHP
javascript 写类方式之一
2009/07/05 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
2013/08/09 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
2014/04/14 Javascript
javascript中加号(+)操作符的一些神奇作用
2014/06/06 Javascript
javascript中的正则表达式使用详解
2015/08/30 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
2016/01/12 Javascript
详解vue-Resource(与后端数据交互)
2017/01/16 Javascript
AngularJS中ng-class用法实例分析
2017/07/06 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
2017/09/04 Javascript
vue实现同一个页面可以有多个router-view的方法
2018/09/20 Javascript
Python中文件I/O高效操作处理的技巧分享
2017/02/04 Python
在python中使用正则表达式查找可嵌套字符串组
2017/10/24 Python
使用Flask集成bootstrap的方法
2018/07/24 Python
Python装饰器的应用场景代码总结
2020/04/10 Python
基于Python绘制美观动态圆环图、饼图
2020/06/03 Python
Farfetch巴西官网:奢侈品牌时尚购物平台
2020/10/19 全球购物
学生自我鉴定
2013/12/18 职场文书
单位实习证明怎么写
2014/01/17 职场文书
创建绿色社区汇报材料
2014/08/22 职场文书
公务员群众路线心得体会
2014/11/03 职场文书
学前班学生评语
2014/12/29 职场文书
清洁员岗位职责
2015/02/15 职场文书
酒店保洁员岗位职责
2015/02/26 职场文书
为什么阅读对所有年龄段的孩子都很重要?
2019/07/08 职场文书
总结一下关于在Java8中使用stream流踩过的一些坑
2021/06/24 Java/Android
Python如何快速找到多个字典中的公共键(key)
2022/04/29 Python
Vscode中SSH插件如何远程连接Linux
2022/05/02 Servers
windows server 2012安装FTP并配置被动模式指定开放端口
2022/06/10 Servers
Spring中bean集合注入的方法详解
2022/07/07 Java/Android