详解angular中通过$location获取路径(参数)的写法


Posted in Javascript onMarch 21, 2017

我最近在研究angular中通过$location获取路径(参数)的写法,在网上搜索了很多的资料,正好今天有时间,就整理一下!

以下获取与修改的 URL 以  ( http://172.16.0.88:8100/#/homePage?id=10&a=100  ) 为例

【一】获取 (不修改URL)

//获取当前完整的url路径 
var absurl = $locationabsUrl(); 
//http://88:8100/#/homePage?id=10&a=100 
 
// 获取当前url路径(当前url#后面的内容,包括参数和哈希值): 
 var url = $locationurl(); 
 // 结果:/homePage?id=10&a=100  
 
 // 获取当前url的子路径(也就是当前url#后面的内容,不包括参数) 
var pathUrl = $locationpath() 
//结果:/homePage  
 
//获取当前url的协议(比如http,https) 
var protocol = $locationprotocol(); 
//结果:http  
 
//获取主机名 
var localhost = $locationhost(); 
//结果:88 
  
//获取当前url的端口 
var port = $locationport(); 
//结果:8100 
 
//获取当前url的哈希值 
var hash = $locationhash() 
//结果:http://088   
 
 //获取当前url的参数的序列化json对象 
 var search = $locationsearch(); 
 //结果:{id: "10", a: "100"}

【二】修改 (改变URL相关内容)

//1 修改url的子路径部分(也就是当前url#后面的内容,不包括参数): 
 $locationurl('/validation'); 
//结果:http://88:8100/#/validation 
 
 //2 修改url的哈希值部分 
$locationhash('myhash3'); 
//结果:http://88:8100/#/homePage?id=10&a=100#myhash3 
 
//3 修改url的参数部分(第一个参数表示url参数的属性名,第二个参数是该属性名的属性值,如果是已有属性名,则修改,如果不是已有属性,则新增) 
$locationsearch('id','111') 
// 结果(修改参数值):http://88:8100/#/homePage?id=111&a=100 
 
$locationsearch('ids','111') 
// 结果(新增ids参数): http://88:8100/#/homePage?id=111&a=100&ids=111 
 
//一次性修改多个参数 
$locationsearch({id:'55','a':'66'}) 
//结果:http://88:8100/#/homePage?id=55&a=66#myhash3 
 
 //第一个值表示url参数的属性名,如果是已有属性名,则删除该属性,如果不是已有属性,那就等于没改过 
 $locationsearch('age',null)

【三】修改URL但不存入历史记录

在上面的修改url的方法的时候,每修改一次,url都会被存入历史记录,可以使用后退按钮回到修改前的url,如果不想要这种效果,而仅仅是替换当前的记录,可以使用  $location.path('/validation').replace();

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于js disabled="false"不起作用的解决办法
Jun 26 Javascript
js通过元素class名字获取元素集合的具体实现
Jan 06 Javascript
关于onchange事件在IE和FF下的表现及解决方法
Mar 08 Javascript
轻松理解JavaScript之AJAX
Mar 15 Javascript
JavaScript数据结构之二叉树的查找算法示例
Apr 13 Javascript
vue2.0模拟锚点的实例
Mar 14 Javascript
结合Vue控制字符和字节的显示个数的示例
May 17 Javascript
js中Object.defineProperty()方法的不详解
Jul 09 Javascript
vue中使用微信公众号js-sdk踩坑记录
Mar 29 Javascript
小程序click-scroll组件设计
Jun 18 Javascript
react 移动端实现列表左滑删除的示例代码
Jul 04 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
Sep 05 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 #jQuery
Linux使用Node.js建立访问静态网页的服务实例详解
Mar 21 #Javascript
在 Angular 中实现搜索关键字高亮示例
Mar 21 #Javascript
js省市区级联查询(插件版&无插件版)
Mar 21 #Javascript
Bootstrap学习笔记 轮播(Carousel)插件
Mar 21 #Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
Mar 21 #Javascript
node安装--linux下的快速安装教程
Mar 21 #Javascript
You might like
PHP中HTTP方式下的Gzip压缩传输方法举偶
2007/02/15 PHP
PHP面向对象之里氏替换原则简单示例
2018/04/08 PHP
Avengerls vs KG BO3 第一场2.18
2021/03/10 DOTA
JavaScript Event学习第二章 Event浏览器兼容性
2010/02/07 Javascript
从零开始学习jQuery (八) 插播:jQuery实施方案
2011/02/23 Javascript
JS在textarea光标处插入文本的小例子
2013/03/22 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
2014/09/03 Javascript
jQuery实现垂直半透明手风琴特效代码分享
2015/08/21 Javascript
js删除数组元素、清空数组的简单方法(必看)
2016/07/27 Javascript
详解自动生成博客目录案例
2016/12/09 Javascript
node学习记录之搭建web服务器教程
2017/02/16 Javascript
jQuery时间验证和转换为标准格式的时间格式
2017/03/06 Javascript
关于Ajax的原理以及代码封装详解
2017/09/08 Javascript
详解tween.js的使用教程
2017/09/14 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
2018/11/29 Javascript
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
Laravel admin实现消息提醒、播放音频功能
2019/07/10 Javascript
微信小程序实现写入读取缓存详解
2019/08/30 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
js之切换全屏和退出全屏实现代码实例
2019/09/09 Javascript
基于Vue全局组件与局部组件的区别说明
2020/08/11 Javascript
解决VueCil代理本地proxytable无效报错404的问题
2020/11/07 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
详解Python 4.0 预计推出的新功能
2019/07/26 Python
Python动态声明变量赋值代码实例
2019/12/30 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
Scrapy实现模拟登录的示例代码
2021/02/21 Python
css sprite简单实例
2016/05/23 HTML / CSS
施华洛世奇韩国官网:SWAROVSKI韩国
2018/06/05 全球购物
多媒体专业自我鉴定
2014/02/28 职场文书
我的小天地教学反思
2014/04/30 职场文书
留学推荐信范文
2014/05/10 职场文书
乒乓球兴趣小组活动总结
2014/07/08 职场文书
2014年学生会生活部工作总结
2014/11/07 职场文书
2019交通安全宣传标语集锦!
2019/06/28 职场文书