小发现之浅谈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 相关文章推荐
jqeury eval将字符串转换json的方法
Jan 20 Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
Mar 29 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
Apr 08 Javascript
使用jquery.upload.js实现异步上传示例代码
Jul 29 Javascript
JsRender for index循环索引用法详解
Oct 31 Javascript
JavaScript动态修改网页元素内容的方法
Mar 21 Javascript
基于jquery实现放大镜效果
Aug 17 Javascript
详解浏览器渲染页面过程
Feb 09 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
Sep 27 Javascript
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
微信小程序pinker组件使用实现自动相减日期
May 07 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
Sep 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 验证图片生成函数
2009/05/21 PHP
PHP 多维数组排序(usort,uasort)
2010/06/30 PHP
适用于php-5.2 的 php.ini 中文版[金步国翻译]
2011/04/17 PHP
供参考的 php 学习提高路线分享
2011/10/23 PHP
php/js获取客户端mac地址的实现代码
2013/07/08 PHP
PHP基本语法总结
2014/09/06 PHP
PHP进行批量任务处理不超时的解决方法
2016/07/11 PHP
PHP实现更改hosts文件的方法示例
2017/08/08 PHP
PHP rsa加密解密算法原理解析
2020/12/09 PHP
JS控制表格隔行变色
2006/06/26 Javascript
基于jQuery的history历史记录插件
2010/12/11 Javascript
JavaScript按位运算符的应用简析
2014/02/04 Javascript
jquery实现的判断倒计时是否结束代码
2016/02/05 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
2016/07/07 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
2016/08/03 Javascript
vue2 中如何实现动态表单增删改查实例
2017/06/09 Javascript
vue router demo详解
2017/10/13 Javascript
VueRouter导航守卫用法详解
2017/12/25 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
2018/08/14 Javascript
JavaScript如何实现元素全排列实例代码
2019/05/14 Javascript
antd design table更改某行数据的样式操作
2020/10/31 Javascript
python实现的jpg格式图片修复代码
2015/04/21 Python
Python字符串逐字符或逐词反转方法
2015/05/21 Python
pandas DataFrame实现几列数据合并成为新的一列方法
2018/06/08 Python
python中itertools模块zip_longest函数详解
2018/06/12 Python
Python异常的检测和处理方法
2018/10/26 Python
python集合的创建、添加及删除操作示例
2019/10/08 Python
python 追踪except信息方式
2020/04/25 Python
Python通过Pillow实现图片对比
2020/04/29 Python
HTML5中实现拖放效果无须借助javascript
2012/12/26 HTML / CSS
汉语言文学毕业求职信
2014/07/17 职场文书
国庆节演讲稿范文2014
2014/09/19 职场文书
法定代表人授权委托书格式
2014/10/14 职场文书
假如给我三天光明读书笔记
2015/06/26 职场文书
2015入党自传书范文
2015/06/26 职场文书
postgresql使用filter进行多维度聚合的解决方法
2021/07/16 PostgreSQL