小发现之浅谈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中的undefined,null,&quot;&quot;,0和false
Mar 08 Javascript
JavaScript 快捷键设置实现代码
Mar 13 Javascript
JQuery 风格的HTML文本转义
Jul 01 Javascript
Jquery下attr和removeAttr的使用方法
Dec 28 Javascript
javascript数组去掉重复
May 12 Javascript
JS文本框追加多个下拉框的值的简单实例
Jul 12 Javascript
jQuery控制TR显示隐藏的几种方法
Jun 18 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
Jul 28 Javascript
JavaScript中三个等号和两个等号你了解多少
Jul 04 Javascript
深入理解基于vue-cli的vuex配置
Jul 24 Javascript
使用JavaScript实现点击循环切换图片效果
Sep 03 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
Nov 12 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 神盾解密工具 ”
2014/06/20 PHP
Laravel 集成 Geetest验证码的方法
2018/05/14 PHP
PHP Ajax跨域问题解决方案代码实例
2020/08/01 PHP
CSS常用网站布局实例
2008/04/03 Javascript
js 学习笔记(三)
2009/12/29 Javascript
javascript浏览器兼容教程之事件处理
2014/06/09 Javascript
jQuery验证元素是否为空的两种常用方法
2015/03/17 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
JS实现的竖向折叠菜单代码
2015/10/21 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
2016/07/04 Javascript
js 获取站点应用名的简单实例
2016/08/18 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
2016/10/29 Javascript
WEB开发之注册页面验证码倒计时代码的实现
2016/12/15 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
2017/07/17 Javascript
VueJs组件prop验证简单介绍
2017/09/12 Javascript
vue-cli项目无法用本机IP访问的解决方法
2018/09/20 Javascript
JavaScript简单实现的仿微博留言功能示例
2019/01/17 Javascript
vue踩坑记录之数组定义和赋值问题
2019/03/20 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
2019/05/14 Javascript
js实现整体缩放页面适配移动端
2020/03/31 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
2020/09/02 Javascript
总结Python编程中函数的使用要点
2016/03/20 Python
win10 64bit下python NLTK安装教程
2018/09/19 Python
Pycharm配置远程调试的方法步骤
2018/12/17 Python
wxpython实现按钮切换界面的方法
2019/11/19 Python
详解Python中的format格式化函数的使用方法
2019/11/20 Python
使用Python实现微信拍一拍功能的思路代码
2020/07/09 Python
Pandas直接读取sql脚本的方法
2021/01/21 Python
浅析CSS3 中的 transition,transform,translate之间区别和作用
2020/03/26 HTML / CSS
罗德与泰勒百货官网:Lord & Taylor
2016/08/12 全球购物
法学个人求职信范文
2014/01/27 职场文书
机械工程及自动化专业求职信
2014/09/03 职场文书
个人三严三实对照检查材料思想汇报
2014/09/22 职场文书
办公经费申请报告
2015/05/15 职场文书
HTTP中的Content-type详解
2022/01/18 HTML / CSS
Mysql分库分表之后主键处理的几种方法
2022/02/15 MySQL