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 AOP 实现ajax回调函数使用比较方便
Nov 20 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
Mar 29 Javascript
jquery 获取dom固定元素 添加样式的简单实例
Feb 04 Javascript
获取中文字符串的实际长度代码
Jun 05 Javascript
jquery+css3实现会动的小圆圈效果
Jan 27 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
Mar 01 Javascript
AngularJs html compiler详解及示例代码
Sep 01 Javascript
vue.js学习笔记之绑定style样式和class列表
Oct 31 Javascript
基于vue 实现token验证的实例代码
Dec 14 Javascript
3分钟读懂移动端rem使用方法(推荐)
May 06 Javascript
解决vue.js提交数组时出现数组下标的问题
Nov 05 Javascript
小程序点餐界面添加购物车左右摆动动画
Sep 23 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
ASP和PHP都是可以删除自身的
2007/04/09 PHP
利用Memcached在php下实现session机制 替换PHP的原生session支持
2010/08/21 PHP
PHP用GD库生成高质量的缩略图片
2011/03/09 PHP
php数组键名技巧小结
2015/02/17 PHP
24条货真价实的PHP代码优化技巧
2016/07/28 PHP
php 魔术常量详解及实例代码
2016/12/04 PHP
解决php-fpm.service not found问题的办法
2017/06/06 PHP
PHP数组常用函数实例小结
2018/08/20 PHP
JS之小练习代码
2008/10/12 Javascript
javascript 特性检测并非浏览器检测
2010/01/15 Javascript
javascript制作loading动画效果 loading效果
2014/01/14 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
2014/03/28 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
2014/12/12 Javascript
node.js中的fs.linkSync方法使用说明
2014/12/15 Javascript
javascript转换静态图片,增加粒子动画效果
2015/05/28 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
2015/09/24 Javascript
JavaScript动态创建form表单并提交的实现方法
2015/12/10 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
2016/02/03 Javascript
浅谈javascript的call()、apply()、bind()的用法
2016/02/21 Javascript
js实现div模拟模态对话框展现URL内容
2016/05/27 Javascript
js实现鼠标跟随运动效果
2020/08/02 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
2017/09/21 jQuery
vue对storejs获取的数据进行处理时遇到的几种问题小结
2018/03/20 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
es6数据变更同步到视图层的方法
2019/03/04 Javascript
ES6基础之数组和对象的拓展实例详解
2019/08/22 Javascript
微信小程序加载机制及运行机制图解
2019/11/27 Javascript
Python使用numpy模块创建数组操作示例
2018/06/20 Python
Python 基于FIR实现Hilbert滤波器求信号包络详解
2020/02/26 Python
浅谈Python中的生成器和迭代器
2020/06/19 Python
JavaScript实现前端网页版倒计时
2021/03/24 Javascript
公司董事长职责
2013/12/12 职场文书
仓库管理员岗位职责
2014/03/19 职场文书
超市开业庆典策划方案
2014/05/14 职场文书
党员干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
技术入股合作协议书
2016/03/21 职场文书