小发现之浅谈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 相关文章推荐
JQuery select控件的相关操作实现代码
Sep 14 Javascript
Jquery图片滚动与幻灯片的实例代码
Apr 08 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
Dec 16 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
Mar 20 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
Jul 18 Javascript
JavaScript禁止复制与粘贴的实现代码
May 16 Javascript
关于Bootstrap按钮组件消除黄框的方法
May 19 Javascript
jQuery EasyUI开发技巧总结
Sep 26 jQuery
你应该知道的几类npm依赖包管理详解
Oct 06 Javascript
vue2 中二级路由高亮问题及配置方法
Jun 10 Javascript
Javascript查看大图功能代码实现
May 07 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
使用Smarty 获取当前日期时间和格式化日期时间的方法详解
2013/06/18 PHP
php curl选项列表(超详细)
2013/07/01 PHP
浅谈PHP链表数据结构(单链表)
2016/06/08 PHP
PHP判断密码强度的方法详解
2017/05/26 PHP
Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
2019/05/08 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
laravel在中间件内生成参数并且传递到控制器中的2种姿势
2019/10/15 PHP
javascript里模拟sleep(两种实现方式)
2013/01/25 Javascript
JS实现的不规则TAB选项卡效果代码
2015/09/18 Javascript
jQuery实现根据滚动条位置加载相应内容功能
2016/07/18 Javascript
jQuery选择器中的特殊符号处理方法
2017/09/08 jQuery
JS实现监控微信小程序的原理
2018/06/15 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
2019/08/29 Javascript
Javascript组合继承方法代码实例解析
2020/04/02 Javascript
vue flex 布局实现div均分自动换行的示例代码
2020/08/05 Javascript
实例讲解python中的序列化知识点
2018/10/08 Python
CentOS6.9 Python环境配置(python2.7、pip、virtualenv)
2019/05/06 Python
选择Python写网络爬虫的优势和理由
2019/07/07 Python
如何基于python测量代码运行时间
2019/12/25 Python
如何配置关联Python 解释器 Anaconda的教程(图解)
2020/04/30 Python
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
2013/01/30 HTML / CSS
WoolOvers爱尔兰:羊绒、羊毛和棉针织品
2017/01/04 全球购物
蔻驰法国官网:COACH法国
2018/11/14 全球购物
FC-Moto英国:欧洲最大的摩托车服装和头盔商店之一
2019/08/25 全球购物
ASOS西班牙官网:英国在线时尚和美容零售商
2020/01/10 全球购物
旅游管理实习自我鉴定
2013/09/29 职场文书
新闻专业大学生找工作的自我评价
2013/10/30 职场文书
个人自我评价范文
2014/02/05 职场文书
优秀教师工作感言
2014/02/16 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
为什么阅读对所有年龄段的孩子都很重要?
2019/07/08 职场文书
Python如何把不同类型数据的json序列化
2021/04/30 Python
Navicat连接MySQL错误描述分析
2021/06/02 MySQL
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python
淡雅古典唯美少女娇媚宁静迷人写真
2022/03/21 杂记