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 相关文章推荐
验证控件与Button的OnClientClick事件详细解析
Dec 04 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
Feb 19 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
Jun 05 Javascript
百度地图API之本地搜索与范围搜索
Jul 30 Javascript
jQuery使用$.ajax进行即时验证实例详解
Dec 11 Javascript
jQuery简单设置文本框回车事件的方法
Aug 01 Javascript
ES5学习教程之Array对象
Apr 01 Javascript
微信小程序对接七牛云存储的方法
Jul 30 Javascript
JS一个简单的注册页面实例
Sep 05 Javascript
判断div滑动到底部的scroll实例代码
Nov 15 Javascript
微信小程序上传图片实例
May 28 Javascript
Vue.js如何使用Socket.IO的示例代码
Sep 05 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
用ADODB来让PHP操作ACCESS数据库的方法
2006/12/31 PHP
使用PHP生成二维码的两种方法(带logo图像)
2014/03/14 PHP
php使用CURL伪造IP和来源实例详解
2015/01/15 PHP
PHP微信红包API接口
2015/12/05 PHP
替换php字符串中的单引号为双引号的方法
2017/02/16 PHP
如何正确使用javascript 来进行我们的程序开发
2014/06/23 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
2014/06/24 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
2015/12/02 Javascript
七个不允许错过的jQuery小技巧
2015/12/21 Javascript
简单解析JavaScript中的__proto__属性
2016/05/10 Javascript
ie下js不执行的几种可能
2017/02/28 Javascript
JavaScript中如何判断一个值的类型
2017/09/15 Javascript
在vue中封装可复用的组件方法
2018/03/01 Javascript
在React项目中使用Eslint代码检查工具及常见问题
2018/10/10 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
2018/11/28 Javascript
详解vantUI框架在vue项目中的应用踩坑
2018/12/06 Javascript
详解vue使用插槽分发内容slot的用法
2019/03/28 Javascript
JS实现简单的表格增删
2020/01/16 Javascript
浅谈function(函数)中的动态参数
2017/04/30 Python
老生常谈Python startswith()函数与endswith函数
2017/09/08 Python
django使用xlwt导出excel文件实例代码
2018/02/06 Python
django 实现将本地图片存入数据库,并能显示在web上的示例
2019/08/07 Python
从python读取sql的实例方法
2020/07/21 Python
Python 使用xlwt模块将多行多列数据循环写入excel文档的操作
2020/11/10 Python
Python的Tqdm模块实现进度条配置
2021/02/24 Python
HTML5输入框下拉菜单功能的示例代码
2020/09/08 HTML / CSS
阿里巴巴英国:Alibaba英国
2019/12/11 全球购物
财务出纳员岗位职责
2013/11/26 职场文书
监察建议书
2015/02/04 职场文书
民政工作个人总结
2015/02/28 职场文书
幼儿园开学家长寄语(2015秋季)
2015/05/27 职场文书
城南旧事电影观后感
2015/06/16 职场文书
创业计划书之蛋糕店
2019/08/29 职场文书
解决Tkinter中button按钮未按却主动执行command函数的问题
2021/05/23 Python
利用Java连接Hadoop进行编程
2022/06/28 Java/Android
uniapp开发打包多端应用完整方法指南
2022/12/24 Javascript