小发现之浅谈location.search与location.hash的问题


Posted in Javascript onJune 23, 2017

背景

用过Vue Router的童鞋应该对路由传参的方式多多少少有些印象,Vue Router支持两种传参方式:query与params;其中query方式就是动态地在路由url后面追加参数,就是http的get请求方式;那Vue Router与location的search和hash有什么关系呢?

正题

首先我们先来看一下query方式传参

路由A

// 跳转到detail路由页
let query = {
   name: abc,
   age: 23     
}
this.$router.push({name: 'detail', query: query})

路由detail

created(){
  // 打印query参数
  alert(JSON.stringify(this.$route.query))    
 }

运行截图

小发现之浅谈location.search与location.hash的问题

一切好像都没有问题,但是由于我好奇心比较强,所有就稍微手贱了一下下,把地址栏中链接的detail和query交换了一下位置,于是就出现了下面的情况,见截图

小发现之浅谈location.search与location.hash的问题

感觉可能是Vue Router的问题(人家Router已经自动把query加在hash后面了,你非要交换位置,似不似傻),在日常使用Vue Router时只要我们的url不是手动把query和hash交换位置,就不会出现问题;这里真正要说的是,在传统模式开发中,如果在url中search与hash同事存在,并且你要用到这些query时,你的hash值一定要放在query后面,下面我们以百度页面演示一下

情况一:query在hash前面

小发现之浅谈location.search与location.hash的问题

情况二:query在hash后面

小发现之浅谈location.search与location.hash的问题

结果证明,当query在hash后面时,连内置对象location自身都取不到query,难道你有什么好的办法吗,所有我们要避免情况二

常用取url参数的方法(网上搜的)

1.正则方式

function GetQueryString(name)
{
   var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
   var r = window.location.search.substr(1).match(reg);
   if(r!=null)return unescape(r[2]); return null;
}
 
// 调用方法
alert(GetQueryString("参数名1"));
alert(GetQueryString("参数名2"));
alert(GetQueryString("参数名3"));

2.字符串方式

function GetRequest() { 
 var url = location.search; //获取url中"?"符后的字串 
 var theRequest = new Object(); 
 if (url.indexOf("?") != -1) { 
  var str = url.substr(1); 
  strs = str.split("&"); 
  for(var i = 0; i < strs.length; i ++) { 
   theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]); 
  } 
 } 
 return theRequest; 
}

// 调用方式
var urlParams = GetRequest();
urlParams["参数名称"]

结语

一个小小的发现,希望大家看完看完会有所印象,以后出现类似问题时,就知道是什么原因,该如何解决

以上这篇小发现之浅谈location.search与location.hash的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于IFRAME 自适应高度的研究
Jul 20 Javascript
javascript radio 联动效果
Mar 04 Javascript
js实现省市联动效果的简单实例
Feb 10 Javascript
使用jQuery.wechat构建微信WEB应用
Oct 09 Javascript
Jquery基础教程之DOM操作
Aug 19 Javascript
jqueryMobile使用示例分享
Jan 12 Javascript
js改变css样式的三种方法推荐
Jun 28 Javascript
VUE实现表单元素双向绑定(总结)
Aug 08 Javascript
vue+element-ui+ajax实现一个表格的实例
Mar 09 Javascript
JavaScript中Dom操作实例详解
Jul 08 Javascript
Node.js Domain 模块实例详解
Mar 18 Javascript
详解微信小程序轨迹回放实现及遇到的坑
Feb 02 Javascript
微信JS SDK接入的几点注意事项(必看篇)
Jun 23 #Javascript
简单谈谈require模块化jquery和angular的问题
Jun 23 #jQuery
详解vuejs之v-for列表渲染
Jun 22 #Javascript
vue.js实现条件渲染的实例代码
Jun 22 #Javascript
vue.js 上传图片实例代码
Jun 22 #Javascript
详解Angular 开发环境搭建
Jun 22 #Javascript
详解Angular2组件之间如何通信
Jun 22 #Javascript
You might like
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
php post json参数的传递和接收处理方法
2018/05/31 PHP
javascript 动态数据下的锚点错位问题解决方法
2008/12/24 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
2013/02/06 Javascript
JS文本框默认值处理详解
2013/07/10 Javascript
jquery获取div距离窗口和父级dv的距离示例
2013/10/10 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
2014/04/08 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
2014/06/15 Javascript
node.js中的fs.createWriteStream方法使用说明
2014/12/17 Javascript
跟我学习javascript的执行上下文
2015/11/18 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
jquery 实现复选框的全选操作实例代码
2017/01/24 Javascript
bootstrap weebox 支持ajax的模态弹出框
2017/02/23 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
2017/05/18 Javascript
在Vant的基础上封装下拉日期控件的代码示例
2018/12/05 Javascript
4 种滚动吸顶实现方式的比较
2019/04/09 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
2019/05/10 Javascript
详解vuex之store源码简单解析
2019/06/13 Javascript
TypeScript中使用getElementXXX()的示例代码
2019/09/12 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
2019/11/26 jQuery
原生JavaScript之es6中Class的用法分析
2020/02/23 Javascript
[58:42]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第一局
2016/02/27 DOTA
Python正则表达式介绍
2012/08/06 Python
Python读取图片EXIF信息类库介绍和使用实例
2014/07/10 Python
web.py中调用文件夹内模板的方法
2014/08/26 Python
python实现数据导出到excel的示例--普通格式
2018/05/03 Python
Python发展史及网络爬虫
2019/06/19 Python
Python自省及反射原理实例详解
2020/07/06 Python
CSS3 简写animation
2012/05/10 HTML / CSS
英国最大的在线快递公司之一:ParcelHero
2019/11/04 全球购物
最新创业融资计划书
2014/01/19 职场文书
大学生就业求职信
2014/06/12 职场文书
战略合作意向书
2014/07/29 职场文书
优秀少先队员事迹材料
2014/12/24 职场文书
Redis集群的关闭与重启操作
2021/07/07 Redis
漫画「狩龙人拉格纳」公开TV动画预告图
2022/03/22 日漫