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 相关文章推荐
html下载本地
Jun 19 Javascript
jquery checkbox实现单选小例
Nov 27 Javascript
node.js中使用socket.io制作命名空间
Dec 15 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
Mar 03 Javascript
Bootstrap字体图标无法正常显示的解决方法
Oct 08 Javascript
关于Vue.js一些问题和思考学习笔记(2)
Dec 02 Javascript
jQuery Ajax File Upload实例源码
Dec 12 Javascript
基于对象合并功能的实现示例
Oct 10 Javascript
解决vue 路由变化页面数据不刷新的问题
Mar 13 Javascript
vue select组件的使用与禁用实现代码
Apr 10 Javascript
Vue 幸运大转盘实现思路详解
May 06 Javascript
koa2+vue实现登陆及登录状态判断
Aug 15 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
Session的工作方式
2006/10/09 PHP
对Session和Cookie的区分与解释
2007/03/16 PHP
PHP 字符串加密函数(在指定时间内加密还原字符串,超时无法还原)
2010/04/28 PHP
非常精妙的PHP递归调用与静态变量使用
2012/12/16 PHP
php动态变量定义及使用
2015/06/10 PHP
分享5个非常有用的Laravel Blade指令
2018/05/30 PHP
Avengerls vs KG BO3 第一场2.18
2021/03/10 DOTA
jQuery-ui引入后Vs2008的无智能提示问题解决方法
2014/02/10 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
2015/03/05 Javascript
JavaScript中操作字符串小结
2015/05/04 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
2015/08/28 Javascript
你不知道的高性能JAVASCRIPT
2016/01/18 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
2016/10/19 Javascript
jQuery模拟淘宝购物车功能
2017/02/27 Javascript
bootstrap suggest搜索建议插件使用详解
2017/03/25 Javascript
微信小程序 数据绑定及运算的简单实例
2017/09/20 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
2019/04/08 Javascript
Vue computed 计算属性代码实例
2020/04/22 Javascript
[01:45]IMBATV TI4前线报道-选手到达
2014/07/07 DOTA
[07:09]2014DOTA2国际邀请赛-Newbee再次发威成功晋级决赛
2014/07/19 DOTA
[01:03:41]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第三场 2月2日
2021/03/11 DOTA
Python中的getopt函数使用详解
2015/07/28 Python
Python开发之快速搭建自动回复微信公众号功能
2016/04/22 Python
python爬虫之urllib库常用方法用法总结大全
2018/11/14 Python
检测python爬虫时是否代理ip伪装成功的方法
2019/07/12 Python
python元组的概念知识点
2019/11/19 Python
使用python写一个自动浏览文章的脚本实例
2019/12/05 Python
用HTML5制作烟火效果的教程
2015/05/12 HTML / CSS
介绍一下HTTP、HTTPS和SSL
2012/12/16 面试题
机电专业大学生求职信
2013/10/04 职场文书
警察思想汇报
2014/01/04 职场文书
运动会表扬稿大全
2014/01/16 职场文书
电力公司个人求职信范文
2014/02/04 职场文书
《小松树和大松树》教学反思
2014/02/20 职场文书
大国崛起英国观后感
2015/06/02 职场文书