AngularJS通过$location获取及改变当前页面的URL


Posted in Javascript onSeptember 23, 2016

注意

本文中获取与修改的URL以 ‘http://172.16.0.88:8100/#/homePage?id=10&a=100' 这个路径为例:

一. 获取url的相关方法(不修改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的相关方法(改变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,如果不想要这种效果,而仅仅是替换当前的记录,可以使用  $location.path('/validation').replace();

总结

以上就是关于AngularJS通过$location获取及改变当前页面URL的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助。如果有疑问大家可以留言交流。

Javascript 相关文章推荐
js内置对象 学习笔记
Aug 01 Javascript
javascript 图片裁剪技巧解读
Nov 15 Javascript
js 判断一个元素是否在页面中存在
Dec 27 Javascript
无闪烁更新网页内容JS实现
Dec 19 Javascript
DeviceOne 让你一见钟情的App快速开发平台
Feb 17 Javascript
js实现导航栏中英文切换效果
Jan 16 Javascript
一次围绕setTimeout的前端面试经验分享
Jun 15 Javascript
Vue在页面数据渲染完成之后的调用方法
Sep 11 Javascript
Echarts之悬浮框中的数据排序问题
Nov 08 Javascript
基于ts的动态接口数据配置的详解
Dec 18 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
Feb 03 Javascript
Vue ECharts实现机舱座位选择展示功能
May 15 Vue.js
AngularJS监听路由的变化示例代码
Sep 23 #Javascript
同步异步动态引入js文件的几种方法总结
Sep 23 #Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
Sep 23 #Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
Sep 23 #Javascript
form表单转Json提交的方法(推荐)
Sep 23 #Javascript
关于验证码在IE中不刷新的快速解决方法
Sep 23 #Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
Sep 23 #Javascript
You might like
PHP 增加了对 .ZIP 文件的读取功能
2006/10/09 PHP
用文本文件制作留言板提示(下)
2006/10/09 PHP
discuz的php防止sql注入函数
2011/01/17 PHP
PHP实现Soap通讯的方法
2014/11/03 PHP
启用Csrf后POST数据时出现的400错误
2015/07/05 PHP
PHP易混淆知识整理笔记
2015/09/24 PHP
PHP附件下载中文名称乱码的解决方法
2015/12/17 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
PHP绕过open_basedir限制操作文件的方法
2018/06/10 PHP
ImageFlow可鼠标控制图片滚动
2008/01/30 Javascript
jquery实现心算练习代码
2010/12/06 Javascript
javascript中直接写php代码的方法
2013/07/31 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
javascript弹出带文字信息的提示框效果
2016/07/19 Javascript
node.js 和HTML5开发本地桌面应用程序
2016/12/13 Javascript
javascript ASCII和Hex互转的实现方法
2016/12/27 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
2017/07/05 Javascript
[07:47]DOTA2国际邀请赛采访专栏:探访Valve总部
2013/08/08 DOTA
Python使用MYSQLDB实现从数据库中导出XML文件的方法
2015/05/11 Python
Python数据结构之双向链表的定义与使用方法示例
2018/01/16 Python
对python操作kafka写入json数据的简单demo分享
2018/12/27 Python
对python 调用类属性的方法详解
2019/07/02 Python
解决Django一个表单对应多个按钮的问题
2019/07/18 Python
Python实现FLV视频拼接功能
2020/01/21 Python
用Python生成HTML表格的方法示例
2020/03/06 Python
一款纯css3实现的漂亮的404页面的实例教程
2014/11/27 HTML / CSS
全球最大的服务市场:Fiverr
2017/01/03 全球购物
标签和贴纸印刷:Lightning Labels
2018/03/22 全球购物
医药营销专业个人自荐信
2013/09/29 职场文书
五年级科学教学反思
2014/02/05 职场文书
大学生秋游活动方案
2014/02/17 职场文书
保安辞职信范文
2015/02/28 职场文书
2015年公司保安年终工作总结
2015/05/14 职场文书
竞聘书的秘诀
2019/04/02 职场文书
python 如何获取页面所有a标签下href的值
2021/05/06 Python
Python 装饰器(decorator)常用的创建方式及解析
2022/04/24 Python