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 import css实例代码
Jul 18 Javascript
Document 对象的常用方法
Jul 31 Javascript
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
Jun 20 Javascript
JQuery实现动态表格点击按钮表格增加一行
Aug 24 Javascript
js获取checkbox值的方法
Jan 28 Javascript
JS替换字符串中空格方法
Apr 17 Javascript
javascript中Array()数组函数详解
Aug 23 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
Feb 25 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
Mar 21 Javascript
js计算两个日期间的天数月的实例代码
Sep 20 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
Apr 02 Javascript
vue-cli3 引入 font-awesome的操作
Aug 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
上海无线电三厂简史修改版
2021/03/01 无线电
第六章 php目录与文件操作
2011/12/30 PHP
PHP连接Access数据库的方法小结
2013/06/20 PHP
Ext面向对象开发实践(续)
2008/11/18 Javascript
jquery实现控制表格行高亮实例
2013/06/05 Javascript
B/S模式项目中常用的javascript汇总
2013/12/17 Javascript
javascript读写json示例
2014/04/11 Javascript
轻量级的原生js日历插件calendar.js使用指南
2015/04/28 Javascript
jquery实现键盘左右翻页特效
2015/04/30 Javascript
简述AngularJS相关的一些编程思想
2015/06/23 Javascript
js验证框架之RealyEasy验证详解
2016/06/08 Javascript
AngularJS入门教程之表单校验用法示例
2016/11/02 Javascript
BootStrap中Table隐藏后显示问题的实现代码
2017/08/31 Javascript
基于datepicker定义自己的angular时间组件的示例
2018/03/14 Javascript
vue mint-ui tabbar变组件使用
2018/05/04 Javascript
浅谈Vue组件单元测试究竟测试什么
2020/02/05 Javascript
js观察者模式的弹幕案例
2020/11/23 Javascript
零基础写python爬虫之urllib2中的两个重要概念:Openers和Handlers
2014/11/05 Python
Django URL传递参数的方法总结
2016/08/28 Python
用python统计代码行的示例(包括空行和注释)
2018/07/24 Python
python利用pandas将excel文件转换为txt文件的方法
2018/10/23 Python
在tensorflow中设置保存checkpoint的最大数量实例
2020/01/21 Python
Python常用类型转换实现代码实例
2020/07/28 Python
canvas环形倒计时组件的示例代码
2018/06/14 HTML / CSS
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
2020/11/10 HTML / CSS
EM Cosmetics官网:由彩妆大神Michelle Phan创办的独立品牌
2020/04/27 全球购物
用C#语言写出在本地创建一个UDP接收端口的具体过程
2016/02/22 面试题
中英文求职信范文
2014/01/27 职场文书
高考励志标语
2014/06/05 职场文书
校园安全广播稿范文
2014/09/25 职场文书
群众路线自我剖析及整改措施
2014/11/04 职场文书
董事长岗位职责
2015/02/13 职场文书
销售辞职信范文
2015/03/02 职场文书
纪检监察立案决定书
2015/06/24 职场文书
python 详解turtle画爱心代码
2022/02/15 Python
JavaScript正则表达式实现注册信息校验功能
2022/05/30 Java/Android