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入门之事件、cookie、定时等
Oct 21 Javascript
javascript与cookie 的问题详解
Nov 11 Javascript
编写高性能Javascript代码的N条建议
Oct 12 Javascript
Angular2自定义分页组件
Apr 19 Javascript
JS实现图片预览的两种方式
Jun 27 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
关于Vue背景图打包之后访问路径错误问题的解决
Nov 03 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
Jul 18 Javascript
JavaScript数组方法的错误使用例子
Sep 13 Javascript
webpack4打包vue前端多页面项目
Sep 17 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
JS sort方法基于数组对象属性值排序
Jul 10 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
php简单的会话类代码
2011/08/08 PHP
php另类上传图片的方法(PHP用Socket上传图片)
2013/10/30 PHP
php对文件进行hash运算的方法
2015/04/03 PHP
php对二维数组进行相关操作(排序、转换、去空白等)
2015/11/04 PHP
Thinkphp3.2.3整合phpqrcode生成带logo的二维码
2016/07/21 PHP
smarty模板的使用方法实例分析
2019/09/18 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
编辑浪子版表单验证类
2007/05/12 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
2013/05/07 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
2013/11/28 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
2014/07/28 Javascript
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
2015/03/24 Javascript
javascript实现图片跟随鼠标移动效果的方法
2015/05/13 Javascript
JavaScript获取并更改input标签name属性的方法
2015/07/02 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
2015/11/24 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
2015/12/01 Javascript
真正好用的js验证上传文件大小的简单方法
2016/10/27 Javascript
深入理解Javascript箭头函数中的this
2017/02/13 Javascript
Node.js和Express简单入门介绍
2017/03/24 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
2017/04/12 Javascript
基于JavaScript实现淘宝商品广告效果
2017/08/10 Javascript
Vue实现按钮旋转和移动位置的实例代码
2018/08/09 Javascript
vue路由前进后退动画效果的实现代码
2018/12/10 Javascript
Node.js事件的正确使用方法
2019/04/05 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
2020/03/05 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
2020/12/26 Vue.js
vue-video-player 断点续播的实现
2021/02/01 Vue.js
[03:22]DAC最前线(第二期)—DOTA2亚洲邀请赛主赛场周边及线路探访
2015/01/24 DOTA
python数据分析数据标准化及离散化详解
2018/02/26 Python
python matplotlib实现将图例放在图外
2020/04/17 Python
Python如何使用正则表达式爬取京东商品信息
2020/06/01 Python
python+selenium实现12306模拟登录的步骤
2021/01/21 Python
北美领先的牛仔品牌:Buffalo David Bitton
2017/05/22 全球购物
市场安全管理制度
2014/01/26 职场文书
详解Python中下划线的5种含义
2021/07/15 Python