小发现之浅谈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 相关文章推荐
用js统计用户下载网页所需时间的脚本
Oct 15 Javascript
jQuery的三种$()
Dec 30 Javascript
JQuery给元素绑定click事件多次执行的解决方法
May 29 Javascript
浅谈javascript中call()、apply()、bind()的用法
Apr 20 Javascript
浅谈javascript中的 “ &amp;&amp; ” 和 “ || ”
Feb 02 Javascript
vue2.0中click点击当前li实现动态切换class
Jun 21 Javascript
在vue项目中引入highcharts图表的方法(详解)
Mar 05 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
Mar 06 Javascript
vue 实现websocket发送消息并实时接收消息
Dec 09 Javascript
node.js中 redis 的安装和基本操作示例
Feb 10 Javascript
node.js使用yargs处理命令行参数操作示例
Feb 11 Javascript
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
微信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中文字符串截取方法实例总结
2014/09/30 PHP
PHP安全上传图片的方法
2015/03/21 PHP
实例讲解php数据访问
2016/05/09 PHP
thinkphp的dump函数无输出实例代码
2016/11/15 PHP
jquery 插件 人性化的消息显示
2008/01/21 Javascript
JavaScript 异步调用框架 (Part 3 - 代码实现)
2009/08/04 Javascript
JQuery Tips(3) 关于$()包装集内元素的改变
2009/12/14 Javascript
nodejs实现黑名单中间件设计
2014/06/17 NodeJs
js实现鼠标悬停图片上时滚动文字说明的方法
2015/02/17 Javascript
jquery自定义右键菜单、全选、不连续选择
2016/03/01 Javascript
全面解析标签页的切换方式
2016/08/21 Javascript
javascript判断firebug是否开启的方法
2016/11/23 Javascript
JavaScript数组复制详解
2017/02/02 Javascript
JavaScript复制内容到剪贴板的两种常用方法
2018/02/27 Javascript
Vue-路由导航菜单栏的高亮设置方法
2018/03/17 Javascript
在Mac下彻底卸载node和npm的方法
2018/05/16 Javascript
使用Vue实现图片上传的三种方式
2018/07/17 Javascript
angular2实现统一的http请求头方法
2018/08/13 Javascript
微信小程序动态添加和删除组件的现实
2020/02/28 Javascript
python实现在字符串中查找子字符串的方法
2015/07/11 Python
Python实现的简单计算器功能详解
2018/08/25 Python
Django框架的中的setting.py文件说明详解
2018/10/15 Python
24式加速你的Python(小结)
2019/06/13 Python
python的pygal模块绘制反正切函数图像方法
2019/07/16 Python
python使用正则表达式(Regular Expression)方法超详细
2019/12/30 Python
Python随机数函数代码实例解析
2020/02/09 Python
Python3标准库之threading进程中管理并发操作方法
2020/03/30 Python
Tensorflow tf.tile()的用法实例分析
2020/05/22 Python
python 从list中随机取值的方法
2020/11/16 Python
Django与AJAX实现网页动态数据显示的示例代码
2021/02/24 Python
ghd法国官方网站:英国最受欢迎的美发工具品牌
2019/04/18 全球购物
大学生实习期自我评价范文
2013/10/03 职场文书
清洁工个人工作总结
2015/03/05 职场文书
社区环境卫生倡议书
2015/04/29 职场文书
Java版 简易五子棋小游戏
2022/05/04 Java/Android
MySql统计函数COUNT的具体使用详解
2022/08/14 MySQL