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 相关文章推荐
JavaScript学习笔记记录我的旅程
May 23 Javascript
解决IE6的PNG透明JS插件使用介绍
Apr 17 Javascript
不使用jquery实现js打字效果示例分享
Jan 19 Javascript
javascript 获取元素样式必杀技
May 04 Javascript
自己封装的javascript事件队列函数版
Jun 12 Javascript
jQuery中get()方法用法实例
Dec 27 Javascript
javascript实现动态标签云
Oct 16 Javascript
jQuery短信验证倒计时功能实现方法详解
May 25 Javascript
jQuery实现底部浮动窗口效果
Sep 07 Javascript
Express使用html模板的详细代码
Sep 18 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
Aug 13 Javascript
JS call()及apply()方法使用实例汇总
Jul 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
使用php 获取时间今天明天昨天时间戳的详解
2013/06/20 PHP
php中json_encode处理gbk与gb2312中文乱码问题的解决方法
2014/07/10 PHP
如何使用php实现评委评分器
2015/07/31 PHP
jQuery 获取浏览器所在的IP地址的小例子
2013/11/08 Javascript
ExtJS4中使用mixins实现多继承示例
2013/12/03 Javascript
js window.open弹出新的网页窗口
2014/01/16 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
2014/10/30 Javascript
使用Plupload实现直接上传附件至七牛云存储
2014/12/26 Javascript
浅谈Jquery为元素绑定事件
2015/04/27 Javascript
JavaScript调用客户端Java程序的方法
2015/07/27 Javascript
通过JS运行机制的角度说说作用域
2019/03/12 Javascript
Js和VUE实现跑马灯效果
2020/05/25 Javascript
浅谈js数组splice删除某个元素爬坑
2020/10/14 Javascript
Python3遍历目录树实现方法
2015/05/22 Python
python中文分词,使用结巴分词对python进行分词(实例讲解)
2017/11/14 Python
NumPy 数组使用大全
2019/04/25 Python
Python 用matplotlib画以时间日期为x轴的图像
2019/08/06 Python
从pandas一个单元格的字符串中提取字符串方式
2019/12/17 Python
解决python cv2.imread 读取中文路径的图片返回为None的问题
2020/06/02 Python
解决Pycharm双击图标启动不了的问题(JetBrains全家桶通用)
2020/08/07 Python
python使用smtplib模块发送邮件
2020/12/17 Python
谈一谈HTML5本地存储技术
2016/03/02 HTML / CSS
前端实现打印图像功能
2019/08/27 HTML / CSS
浅析图片上传及canvas压缩的流程
2020/06/10 HTML / CSS
PatPat阿根廷:妈妈们的购物平台
2019/05/30 全球购物
澳大利亚办公室装修:JasonL Office Furniture
2019/06/25 全球购物
空字符串(“”)和null的区别
2012/11/13 面试题
经典c++面试题三
2015/07/08 面试题
单位在职证明范本
2014/01/09 职场文书
思想道德自我评价2015
2015/03/09 职场文书
2015年会计年终工作总结
2015/05/26 职场文书
销售口号霸气押韵
2015/12/24 职场文书
《失物招领》教学反思
2016/02/20 职场文书
Sql-Server数据库单表查询 4.3实验课
2021/04/05 SQL Server
SQLServer 错误: 15404,无法获取有关 Windows NT 组/用户 WIN-8IVSNAQS8T7\Administrator 的信息
2021/06/30 SQL Server
苹果可能正在打击不进行更新的 App
2022/04/24 数码科技