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 相关文章推荐
JavaScript 编程引入命名空间的方法
Jun 29 Javascript
window.onload 加载完毕的问题及解决方案(下)
Jul 09 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
Jan 06 Javascript
什么是DOM(Document Object Model)文档对象模型
Mar 05 Javascript
父页面显示遮罩层弹出半透明状态的dialog
Mar 04 Javascript
javascript setinterval 的正确语法如何书写
Jun 17 Javascript
ajax+jQuery实现级联显示地址的方法
May 06 Javascript
js获取iframe中的window对象的实现方法
May 20 Javascript
JavaScript第一篇之实现按钮全选、功能
Aug 21 Javascript
Bootstrap CSS布局之表格
Dec 17 Javascript
JavaScript WeakMap使用详解
Feb 05 Javascript
javascript实现倒计时提示框
Mar 02 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
用Socket发送电子邮件
2006/10/09 PHP
在线短消息收发的程序,不用数据库
2006/10/09 PHP
10个可以简化php开发过程的MySQL工具
2010/04/11 PHP
解析数组非数字键名引号的必要性
2013/08/09 PHP
PHP中的浅复制与深复制的实例详解
2017/10/26 PHP
JavaScript获取图片真实大小代码实例
2014/09/24 Javascript
Nodejs异步回调的优雅处理方法
2014/09/25 NodeJs
jQuery动画与特效详解
2015/02/01 Javascript
Javascript核心读书有感之语句
2015/02/11 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
2015/08/25 Javascript
论JavaScript模块化编程
2016/03/07 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
2016/05/24 Javascript
Node.js中多进程模块Cluster的介绍与使用
2017/05/27 Javascript
babel的使用及安装配置教程
2018/02/22 Javascript
基于jQuery实现的设置文本区域的光标位置
2018/06/15 jQuery
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
2019/04/12 Javascript
用smtplib和email封装python发送邮件模块类分享
2014/02/17 Python
Python Requests 基础入门
2016/04/07 Python
Python自动化部署工具Fabric的简单上手指南
2016/04/19 Python
Python中的os.path路径模块中的操作方法总结
2016/07/07 Python
梅尔频率倒谱系数(mfcc)及Python实现
2019/06/18 Python
python实现的生成word文档功能示例
2019/08/23 Python
Django框架反向解析操作详解
2019/11/28 Python
python 发送get请求接口详解
2020/11/17 Python
详解CSS3:overflow属性
2020/11/17 HTML / CSS
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
New Balance天猫官方旗舰店:始于1906年,百年慢跑品牌
2017/11/15 全球购物
丝芙兰新加坡官网:Sephora新加坡
2018/12/04 全球购物
LVMH旗下最大的奢侈品网站平台:24S
2020/05/24 全球购物
面向对象编程是如何提高软件开发水平的
2014/05/06 面试题
致跳高运动员广播稿
2014/01/13 职场文书
党支部书记先进事迹
2014/01/17 职场文书
基层党员四风问题自我剖析材料
2014/09/29 职场文书
餐厅感恩节活动策划方案
2014/10/11 职场文书
黄石寨导游词
2015/02/05 职场文书