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 数组的 uniq 方法
Jan 23 Javascript
通过正则格式化url查询字符串实现代码
Dec 28 Javascript
jQuery页面加载初始化常用的三种方法
Jun 04 Javascript
Node.js的包详细介绍
Jan 14 Javascript
跟我学习javascript的prototype原型和原型链
Nov 18 Javascript
js代码实现下拉菜单【推荐】
Dec 15 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
Feb 16 Javascript
vue.js实现备忘录功能的方法
Jul 10 Javascript
vue组件父与子通信详解(一)
Nov 07 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
Jul 19 Javascript
React Native 混合开发多入口加载方式详解
Sep 23 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 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 addslashes及其他清除空格的方法是不安全的
2012/01/25 PHP
php 深入理解strtotime函数的使用详解
2013/05/23 PHP
ThinkPHP中redirect用法分析
2014/12/05 PHP
PHP分页初探 一个最简单的PHP分页代码的简单实现
2016/06/21 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
PHP设计模式概论【概念、分类、原则等】
2020/05/01 PHP
JQuery中根据属性或属性值获得元素(6种情况获取方法)
2013/01/17 Javascript
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
js修改原型的属性使用介绍
2014/01/26 Javascript
元素绑定click点击事件方法
2015/06/08 Javascript
去除字符串左右两边的空格(实现代码)
2016/05/12 Javascript
JS获取复选框的值,并传递到后台的实现方法
2016/05/30 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
Vue.js实现网格列表布局转换方法
2017/08/25 Javascript
node.js操作MongoDB的实例详解
2017/10/11 Javascript
详解vue mint-ui源码解析之loadmore组件
2017/10/11 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
2019/05/20 Javascript
vue实现select下拉显示隐藏功能
2019/09/30 Javascript
vue监听dom大小改变案例
2020/07/29 Javascript
python检测服务器是否正常
2014/02/16 Python
Python中用Descriptor实现类级属性(Property)详解
2014/09/18 Python
用Python实现换行符转换的脚本的教程
2015/04/16 Python
在Python的Tornado框架中实现简单的在线代理的教程
2015/05/02 Python
python根据京东商品url获取产品价格
2015/08/09 Python
Python实现Linux命令xxd -i功能
2016/03/06 Python
Python下载指定页面上图片的方法
2016/05/12 Python
Python列表切片用法示例
2017/04/19 Python
Python实现PS滤镜Fish lens图像扭曲效果示例
2018/01/29 Python
TensorFlow实现非线性支持向量机的实现方法
2018/04/28 Python
使用Python自动化破解自定义字体混淆信息的方法实例
2019/02/13 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
CSS3实现红包抖动效果
2020/12/23 HTML / CSS
浅析HTML5中的download属性使用
2019/03/13 HTML / CSS
酒店开业策划方案
2014/06/02 职场文书
关于安全的标语
2014/06/10 职场文书
《巫师》是美食游戏?CDPR10月将推出《巫师》官方食谱
2022/04/03 其他游戏