详解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 相关文章推荐
jquery学习笔记 用jquery实现无刷新登录
Aug 08 Javascript
JS设置网页图片vspace和hspace属性的方法
Apr 01 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
Aug 07 Javascript
javascript中tostring()和valueof()的用法及两者的区别
Nov 16 Javascript
jQuery数组处理函数整理
Aug 03 Javascript
JavaScript中最常用的10种代码简写技巧总结
Jun 28 Javascript
vue-cli实现多页面多路由的示例代码
Jan 30 Javascript
vue-cli axios请求方式及跨域处理问题
Mar 28 Javascript
小程序ios音频播放没声音问题的解决
Jul 11 Javascript
js 实现在2d平面上画8的方法
Oct 10 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
Jul 17 Javascript
Vue如何实现组件间通信
May 15 Vue.js
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环境配置 php5 mysql5 apache2 phpmyadmin安装与配置
2006/11/17 PHP
解析PHP实现多进程并行执行脚本
2013/06/18 PHP
php实现转换ubb代码的方法
2015/06/18 PHP
PHP实现上一篇下一篇的方法实例总结
2016/09/22 PHP
JScript 脚本实现文件下载 一般用于下载木马
2009/10/29 Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
2011/05/23 Javascript
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2012/07/21 Javascript
jQuery中position()方法用法实例
2015/01/16 Javascript
详解JavaScript ES6中的模板字符串
2015/07/28 Javascript
js实现点击切换TAB标签实例
2015/08/21 Javascript
JavaScript+H5实现微信摇一摇功能
2018/05/23 Javascript
微信小程序实现左滑修改、删除功能
2020/10/19 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
2019/01/02 Javascript
微信小程序时间戳转日期的详解
2019/04/30 Javascript
重置Redux的状态数据的方法实现
2019/11/18 Javascript
JavaScript多种图形实现代码实例
2020/06/28 Javascript
详解vue3.0 diff算法的使用(超详细)
2020/07/01 Javascript
基于JavaScript实现简单抽奖功能代码实例
2020/10/20 Javascript
在vue中使用eslint,配合vscode的操作
2020/11/09 Javascript
Python原始字符串(raw strings)用法实例
2014/10/13 Python
Python中read()、readline()和readlines()三者间的区别和用法
2017/07/30 Python
对numpy中轴与维度的理解
2018/04/18 Python
PyCharm安装第三方库如Requests的图文教程
2018/05/18 Python
在python shell中运行python文件的实现
2019/12/21 Python
python误差棒图errorbar()函数实例解析
2020/02/11 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
HTML5 Canvas绘制文本及图片的基础教程
2016/03/14 HTML / CSS
移动HTML5前端框架—MUI的使用
2017/12/18 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
中科前程Java笔试题
2016/11/20 面试题
教师队伍管理制度
2014/01/14 职场文书
浙江文明网签名寄语
2014/01/18 职场文书
审计专业自荐信范文
2014/04/21 职场文书
大班下学期个人总结
2015/02/13 职场文书
2015年保送生自荐信
2015/03/24 职场文书
python生成可执行exe控制Microsip自动填写号码并拨打功能
2021/06/21 Python