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 相关文章推荐
对textarea框的代码调试,而且功能上使用非常方便,酷
Jun 30 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
May 07 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
Aug 07 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
Oct 09 Javascript
JS实现的tab切换选项卡效果示例
Feb 28 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
Aug 06 Javascript
vue实现多条件和模糊搜索功能
May 28 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
Jan 18 Javascript
JS实现长图上下滚动效果
Mar 19 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
Jun 25 Javascript
详解如何在Javascript中使用Object.freeze()
Oct 18 Javascript
jquery实现图片放大镜效果
Dec 23 jQuery
使用原生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简单实现加减乘除计算器
2014/01/06 PHP
thinkphp实现图片上传功能分享
2014/03/04 PHP
php实现字符串反转输出的方法
2015/03/14 PHP
php实现微信原生支付(扫码支付)功能
2018/05/30 PHP
extjs fckeditor集成代码
2009/05/10 Javascript
Javascript 闭包引起的IE内存泄露分析
2012/05/23 Javascript
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
javascript将数字转换整数金额大写的方法
2015/01/27 Javascript
如何防止JavaScript自动插入分号
2015/11/05 Javascript
原生js模拟淘宝购物车项目实战
2015/11/18 Javascript
详解JS对象封装的常用方式
2016/12/30 Javascript
Angular4集成ng2-file-upload的上传组件
2018/03/14 Javascript
vue.js中实现登录控制的方法示例
2018/04/23 Javascript
vue 中滚动条始终定位在底部的方法
2018/09/03 Javascript
微信小程序实现登录遮罩效果
2018/11/01 Javascript
基于vue实现web端超大数据量表格的卡顿解决
2019/04/02 Javascript
jQuery层叠选择器用法实例分析
2019/06/28 jQuery
Python排序搜索基本算法之希尔排序实例分析
2017/12/09 Python
python实现公司年会抽奖程序
2019/01/22 Python
python中update的基本使用方法详解
2019/07/17 Python
解决keras模型保存h5文件提示无此目录问题
2020/07/01 Python
详解python UDP 编程
2020/08/24 Python
Python如何将模块打包并发布
2020/08/30 Python
AmazeUI 折叠面板的实现代码
2020/08/17 HTML / CSS
Oakley官网:运动太阳镜、雪镜和服装
2016/09/30 全球购物
联想香港官方网站及网店:Lenovo香港
2018/04/13 全球购物
L*SPACE官网:比基尼、泳装和度假服装
2019/03/18 全球购物
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/04/11 面试题
计算机专业推荐信范文
2013/11/27 职场文书
中年人生感言
2014/02/04 职场文书
大学生军训感想
2014/02/16 职场文书
《少年王冕》教学反思
2014/04/11 职场文书
2014年人大工作总结
2014/12/10 职场文书
厉害!这是Redis可视化工具最全的横向评测
2021/07/15 Redis
MySQL如何快速创建800w条测试数据表
2022/03/17 MySQL
SpringBoot使用AOP实现统计全局接口访问次数详解
2022/06/16 Java/Android