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 相关文章推荐
Web 前端设计模式--Dom重构 提高显示性能
Oct 22 Javascript
鼠标事件延时切换插件
Mar 12 Javascript
js中top/parent/frame概述及案例应用
Feb 06 Javascript
JS保存和删除cookie操作 判断cookie是否存在
Nov 13 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
Feb 26 Javascript
微信小程序页面开发注意事项整理
May 18 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
Jun 20 Javascript
Angularjs中的$apply及优化使用详解
Jul 02 Javascript
JavaScript面向对象中接口实现方法详解
Jul 24 Javascript
在layui下对元素进行事件绑定的实例
Sep 06 Javascript
Vuex的热更替如何实现
Jun 05 Javascript
vue 遮罩层阻止默认滚动事件操作
Jul 28 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
pw的一个放后门的方法分析
2007/10/08 PHP
PHP写的获取各搜索蜘蛛爬行记录代码
2012/08/21 PHP
php导出excel格式数据问题
2014/03/11 PHP
php 购物车完整实现代码
2014/06/05 PHP
PHP实现简单汉字验证码
2015/07/28 PHP
php修改数组键名的方法示例
2017/04/15 PHP
php简单随机字符串生成方法示例
2017/04/19 PHP
PHP多种序列化/反序列化的方法详解
2017/06/23 PHP
JavaScript 检测浏览器和操作系统的脚本
2008/12/26 Javascript
ie 调试javascript的工具
2009/04/29 Javascript
给Function做的OOP扩展
2009/05/07 Javascript
动态创建样式表在各浏览器中的差异测试代码
2011/09/13 Javascript
Function.prototype.call.apply结合用法分析示例
2013/07/03 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
2014/10/26 Javascript
jQuery动态修改超链接地址的方法
2015/02/13 Javascript
Jquery异步提交表单代码分享
2015/03/26 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
2016/10/25 Javascript
JS实现快递单打印功能【推荐】
2018/06/21 Javascript
python操作MySQL数据库的方法分享
2012/05/29 Python
用python实现的去除win下文本文件头部BOM的代码
2013/02/10 Python
Python下的常用下载安装工具pip的安装方法
2015/11/13 Python
python中比较两个列表的实例方法
2019/07/04 Python
关于python 的legend图例,参数使用说明
2020/04/17 Python
keras .h5转移动端的.tflite文件实现方式
2020/05/25 Python
详解numpy.ndarray.reshape()函数的参数问题
2020/10/13 Python
CSS3的Border-radius轻松制作圆角
2012/12/24 HTML / CSS
如何使用amaze ui的分页样式封装一个通用的JS分页控件
2020/08/21 HTML / CSS
英国最受欢迎的价格比较网站之一:MoneySuperMarket
2018/12/19 全球购物
优秀党员主要事迹
2014/01/19 职场文书
中学教师培训制度
2014/01/31 职场文书
维护民族团结演讲稿
2014/08/27 职场文书
教师节倡议书
2014/08/30 职场文书
健康状况证明模板
2014/10/23 职场文书
2016年圣诞节义工活动总结
2016/04/01 职场文书
python如何进行基准测试
2021/04/26 Python
html中相对位置与绝对位置的具体使用
2022/05/15 HTML / CSS