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 相关文章推荐
document.open() 与 document.write()的区别
Aug 13 Javascript
flexigrid 参数说明
Nov 23 Javascript
javascript上传图片前预览图片兼容大多数浏览器
Oct 25 Javascript
Jquery Ajax xmlhttp请求成功问题
Feb 04 Javascript
JavaScript使用function定义对象并调用的方法
Mar 23 Javascript
JS基于面向对象实现的拖拽库实例
Sep 24 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
Jan 18 Javascript
微信小程序 共用变量值的实现
Jul 12 Javascript
ReactJS实现表单的单选多选和反选的示例
Oct 13 Javascript
javascript获取元素的计算样式
May 24 Javascript
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
javascript的var与let,const之间的区别详解
Feb 18 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
这部好评如潮的动漫 知名梗频出 但是画风劝退很多人
2020/03/08 日漫
利用递归把多维数组转为一维数组的函数
2006/10/09 PHP
php抓取https的内容的代码
2010/04/06 PHP
joomla jce editor 解决上传中文名文件失败问题
2013/06/09 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
Laravel框架实现的使用smtp发送邮件功能示例
2019/03/12 PHP
javascript 全选与全取消功能的实现代码
2012/12/23 Javascript
三种方式获取XMLHttpRequest对象
2014/04/21 Javascript
详解Angularjs中的依赖注入
2016/03/11 Javascript
深入浅出讲解ES6的解构
2016/08/03 Javascript
深入理解Node.js 事件循环和回调函数
2016/11/02 Javascript
VueJs 将接口用webpack代理到本地的方法
2017/11/27 Javascript
优化Vue项目编译文件大小的方法步骤
2019/05/27 Javascript
[49:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第二场 3月4日
2021/03/11 DOTA
python 生成不重复的随机数的代码
2011/05/15 Python
python中map、any、all函数用法分析
2015/04/21 Python
在Python的Django框架中调用方法和处理无效变量
2015/07/15 Python
解决python3在anaconda下安装caffe失败的问题
2017/06/15 Python
python列表list保留顺序去重的实例
2018/12/14 Python
解决python写入带有中文的字符到文件错误的问题
2019/01/31 Python
python安装requests库的实例代码
2019/06/25 Python
Python统计分析模块statistics用法示例
2019/09/06 Python
如何理解Python中包的引入
2020/05/29 Python
Python实现曲线拟合的最小二乘法
2021/02/19 Python
CSS3实现淘宝留白的方法
2020/06/05 HTML / CSS
在线服装零售商:SheIn
2016/07/22 全球购物
FOREO官方网站:LUNA露娜洁面仪
2016/11/28 全球购物
Hashtable 添加内容的方式有哪几种,有什么区别?
2012/04/08 面试题
竞聘副主任科员演讲稿
2014/01/11 职场文书
酒店仓管员岗位职责
2014/04/28 职场文书
2014年圣诞节寄语
2014/12/08 职场文书
信仰纪录片观后感
2015/06/08 职场文书
乡镇司法所2015年度工作总结
2015/10/14 职场文书
文明和谐家庭事迹材料(2016精选版)
2016/02/29 职场文书
2016年优秀党务工作者先进事迹材料
2016/02/29 职场文书
Redis Cluster 集群搭建你会吗
2021/08/04 Redis