小发现之浅谈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 相关文章推荐
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
Nov 30 Javascript
用js模拟struts2的多action调用示例
May 19 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
Jun 24 Javascript
jQuery检测返回值的数据类型
Jul 13 Javascript
JavaScript重载函数实例剖析
May 13 Javascript
使用vue.js编写蓝色拼图小游戏
Mar 17 Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
May 26 Javascript
简单实现js进度条加载效果
Mar 25 Javascript
vue生命周期的探索
Apr 03 Javascript
基于three.js实现的3D粒子动效实例代码
Apr 09 Javascript
Vue中qs插件的使用详解
Feb 07 Javascript
Node实现搜索框进行模糊查询
Jun 28 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和ACCESS写聊天室(九)
2006/10/09 PHP
echo(),print(),print_r()之间的区别?
2006/11/19 PHP
基于php设计模式中单例模式的应用分析
2013/05/15 PHP
php使用qr生成二维码的示例分享
2014/01/20 PHP
PHP滚动日志的代码实现
2015/06/10 PHP
php使用array_search函数实现数组查找的方法
2015/06/12 PHP
WordPress中转义HTML与过滤链接的相关PHP函数使用解析
2015/12/22 PHP
php cookie 详解使用实例
2016/11/03 PHP
php实现的二分查找算法示例
2017/06/20 PHP
PHP-FPM 的管理和配置详解
2019/02/17 PHP
php实现微信公众号创建自定义菜单功能的实例代码
2019/06/11 PHP
在JavaScript中通过URL传递汉字的方法
2007/04/09 Javascript
利用jq让你的div居中的好方法分享
2013/11/21 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
2014/04/06 Javascript
js实现类似jquery里animate动画效果的方法
2015/04/10 Javascript
快速学习JavaScript的6个思维技巧
2015/10/13 Javascript
JavaScript获取短信验证码(周期性)
2016/12/29 Javascript
js放到head中失效的原因与解决方法
2017/03/07 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
2017/05/07 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
2017/08/11 Javascript
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
React学习之JSX与react事件实例分析
2020/01/06 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
2020/02/23 Javascript
vue设置默认首页的操作
2020/08/12 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
2020/10/24 Javascript
python基于Tkinter库实现简单文本编辑器实例
2015/05/05 Python
利用python将图片转换成excel文档格式
2017/12/30 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
python带参数打包exe及调用方式
2019/12/21 Python
如何在Python3中使用telnetlib模块连接网络设备
2020/09/21 Python
GafasWorld哥伦比亚:网上购买眼镜
2017/11/28 全球购物
租房协议书
2014/09/12 职场文书
房产授权委托书范本
2014/09/22 职场文书
诚信承诺书
2015/01/19 职场文书
5种方法告诉你如何使JavaScript 代码库更干净
2021/09/15 Javascript
PHP遍历数组的6种方式总结
2021/11/17 PHP