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 相关文章推荐
求得div 下 img的src地址的js代码
Feb 28 Javascript
如何实现动态删除javascript函数
May 27 Javascript
Javascript 读后台cookie代码
Sep 15 Javascript
斜45度寻路实现函数
Aug 20 Javascript
JavaScript DOM 学习第九章 选取范围的介绍
Feb 19 Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
Apr 26 Javascript
jQuery is()函数用法3例
May 06 Javascript
jQuery代码性能优化的10种方法
Jun 21 Javascript
html判断当前页面是否在iframe中的实例
Nov 30 Javascript
Javascript实现跨域后台设置拦截的方法详解
Aug 04 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
Nov 19 Javascript
three.js 实现露珠滴落动画效果的示例代码
Mar 01 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
php异常:Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE  eval()'d code error
2011/05/19 PHP
PHP+Memcache实现wordpress访问总数统计(非插件)
2014/07/04 PHP
thinkphp普通查询与表达式查询实例分析
2014/11/24 PHP
PHP中使用hidef扩展代替define提高性能
2015/04/09 PHP
合格的PHP程序员必备技能
2015/11/13 PHP
php ajax实现文件上传进度条
2016/03/29 PHP
php一个文件搞定微信jssdk配置
2016/12/12 PHP
php中照片旋转 (orientation) 问题的正确处理
2017/02/16 PHP
原生js拖拽(第一课 未兼容)拖拽思路
2013/03/29 Javascript
使用js实现一个可编辑的select下拉列表
2014/02/20 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
全面解析Bootstrap排版使用方法(文字样式)
2015/11/30 Javascript
浅谈JavaScript的全局变量与局部变量
2016/06/10 Javascript
NodeJS使用七牛云存储上传文件的方法
2017/07/24 NodeJs
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
VueJs使用Amaze ui调整列表和内容页面
2017/11/30 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
2018/10/09 Javascript
JS数组扁平化(flat)方法总结详解
2019/06/24 Javascript
layer弹出层自适应高度,垂直水平居中的实现
2019/09/16 Javascript
vue+ts下对axios的封装实现
2020/02/18 Javascript
vue实现分页的三种效果
2020/06/23 Javascript
下载给定网页上图片的方法
2014/02/18 Python
Python构造函数及解构函数介绍
2015/02/26 Python
深入解析Python编程中JSON模块的使用
2015/10/15 Python
在Python中使用Neo4j的方法
2019/03/14 Python
Python 等分切分数据及规则命名的实例代码
2019/08/16 Python
CSS3教程(3):border-color网页边框色彩
2009/04/02 HTML / CSS
css3实现椭圆轨迹旋转的示例代码
2018/10/29 HTML / CSS
体育系毕业生自荐信
2014/06/28 职场文书
2014个人年度工作总结范文
2014/12/24 职场文书
服装区域经理岗位职责
2015/04/10 职场文书
2015年医药代表工作总结
2015/04/25 职场文书
vue-router中hash模式与history模式的区别
2021/06/23 Vue.js
《黑岩★★射手 DAWN FALL》BD发售宣传CM公开
2022/04/04 日漫
Vue2项目中对百度地图的封装使用详解
2022/06/16 Vue.js