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中令你抓狂的魔术变量
Nov 30 Javascript
符合标准的js表单提交的代码
Sep 13 Javascript
实现js保留小数点后N位的代码
Nov 13 Javascript
AngularJS入门教程之Hello World!
Dec 06 Javascript
chrome调试javascript详解
Oct 21 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
Dec 08 Javascript
Bootstrap基本模板的使用和理解1
Dec 14 Javascript
JavaScript实现定时页面跳转功能示例
Feb 14 Javascript
js中的事件委托或是事件代理使用详解
Jun 23 Javascript
vue-cli 组件的导入与使用教程详解
Apr 11 Javascript
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
解决vue安装less报错Failed to compile with 1 errors的问题
Oct 22 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执行速度全攻略(上)
2006/10/09 PHP
使用dump函数,给php加断点测试
2013/06/25 PHP
php+html5实现无刷新图片上传教程
2016/01/22 PHP
PHP利用超级全局变量$_POST来接收表单数据的实例
2016/11/05 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
基于JQuery实现异步刷新的代码(转载)
2011/03/29 Javascript
通过js获取div的background-image属性
2013/10/15 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
2014/01/09 Javascript
Android中的jQuery:AQuery简介
2014/05/06 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
2015/12/04 Javascript
总结jQuery插件开发中的一些要点
2016/05/16 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
2016/08/05 Javascript
Bootstarp基本模版学习教程
2017/02/01 Javascript
js实现年月日表单三级联动
2020/04/17 Javascript
详解用webpack2搭建angular2的项目
2017/06/22 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
2017/10/24 jQuery
解决Mac下安装nmp的淘宝镜像失败问题
2018/05/16 Javascript
利用js-cookie实现前端设置缓存数据定时失效
2019/06/18 Javascript
js时间转换毫秒的实例代码
2019/08/21 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
2020/02/06 Javascript
用python读写excel的方法
2014/11/18 Python
用生成器来改写直接返回列表的函数方法
2017/05/25 Python
Python简易版图书管理系统
2019/08/12 Python
python 给图像添加透明度(alpha通道)
2020/04/09 Python
HTML5新表单元素_动力节点Java学院整理
2017/07/12 HTML / CSS
Farfetch中文官网:奢侈品牌时尚购物平台
2020/03/15 全球购物
服装电子商务创业计划书
2014/01/30 职场文书
《雪地里的小画家》教学反思
2014/02/22 职场文书
预备党员入党自我评价范文
2014/03/10 职场文书
如何写求职信
2014/05/24 职场文书
机电专业求职信
2014/06/14 职场文书
网络工程专业大学生求职信
2014/10/01 职场文书
导师工作推荐信
2015/03/27 职场文书
民事答辩状范本
2015/05/21 职场文书
HAM-2000摩机图
2021/04/22 无线电
MySQL 存储过程的优缺点分析
2021/05/20 MySQL