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 相关文章推荐
NODE.JS加密模块CRYPTO常用方法介绍
Jun 05 Javascript
jQuery制作拼图小游戏
Jan 12 Javascript
jQuery仿gmail实现fixed布局的方法
May 27 Javascript
JS实现霓虹灯文字效果的方法
Aug 06 Javascript
javascript函数式编程程序员的工具集
Oct 11 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
Nov 18 Javascript
详解Bootstrap四种图片样式
Jan 04 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
Dec 16 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
微信小程序实现下载进度条的方法
Dec 08 Javascript
element-ui 上传图片后清空图片显示的实例
Sep 04 Javascript
node中的session的具体使用
Sep 14 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
抓取并下载CSS中所有图片文件的php代码
2011/09/26 PHP
php  PATH_SEPARATOR判断当前服务器系统类型实例
2016/10/28 PHP
PHP实现执行外部程序的方法详解
2017/08/17 PHP
thinkPHP框架自动填充原理与用法分析
2018/04/03 PHP
解决在Laravel 中处理OPTIONS请求的问题
2019/10/11 PHP
BOOM vs RR BO3 第二场2.13
2021/03/10 DOTA
js计算页面刷新的次数
2009/07/20 Javascript
JavaScript中使用正则匹配多条,且获取每条中的分组数据
2010/11/30 Javascript
动态获取复选框checkbox选中个数的jquery代码
2013/06/25 Javascript
jquery把int类型转换成字符串类型的方法
2016/10/07 Javascript
浅析如何利用JavaScript进行语音识别
2016/10/27 Javascript
详解js的事件处理函数和动态创建html标记方法
2016/12/16 Javascript
详解如何在vue中使用sass
2017/06/21 Javascript
详解Angular.js中$http拦截器的介绍及使用
2017/07/04 Javascript
JS中type="button"和type="submit"的区别
2017/07/04 Javascript
微信小程序城市选择及搜索功能的方法
2019/03/22 Javascript
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
[01:09]2014DOTA2国际邀请赛 TI4西雅图DOTA2 中国美女coser加油助威
2014/07/20 DOTA
[03:22]DAC最前线(第二期)—DOTA2亚洲邀请赛主赛场周边及线路探访
2015/01/24 DOTA
Python快速从注释生成文档的方法
2016/12/26 Python
代码讲解Python对Windows服务进行监控
2018/02/11 Python
深入理解Django的中间件middleware
2018/03/14 Python
python pyheatmap包绘制热力图
2018/11/09 Python
基于Python爬取爱奇艺资源过程解析
2020/03/02 Python
python基于win32api实现键盘输入
2020/12/09 Python
django项目中使用云片网发送短信验证码的实现
2021/01/19 Python
澳大利亚最便宜的网上药房:Chemist Warehouse
2020/01/30 全球购物
教师党性分析材料
2014/02/04 职场文书
国窖1573广告词
2014/03/21 职场文书
竞选卫生委员演讲稿
2014/04/28 职场文书
法人任命书范本
2014/06/04 职场文书
产品陈列协议书(标准版)
2014/09/17 职场文书
实习班主任自我评价
2015/03/11 职场文书
python如何做代码性能分析
2021/04/26 Python
MySQL子查询中order by不生效问题的解决方法
2021/08/02 MySQL
Python利用FlashText算法实现替换字符串
2022/03/31 Python