小发现之浅谈location.search与location.hash的问题

背景

用过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))
 }

运行截图

一切好像都没有问题，但是由于我好奇心比较强，所有就稍微手贱了一下下，把地址栏中链接的detail和query交换了一下位置，于是就出现了下面的情况，见截图

感觉可能是Vue Router的问题（人家Router已经自动把query加在hash后面了，你非要交换位置，似不似傻），在日常使用Vue Router时只要我们的url不是手动把query和hash交换位置，就不会出现问题；这里真正要说的是，在传统模式开发中，如果在url中search与hash同事存在，并且你要用到这些query时，你的hash值一定要放在query后面，下面我们以百度页面演示一下

情况一：query在hash前面

情况二：query在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的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详谈js中window.location.search的用法和作用

    详谈js中window.location.search的用法和作用

    用该属性获取页面 URL 地址: window.location 对象所包含的属性 属性 描述 hash 从井号 (#) 开始的 URL(锚) host 主机名和当前 URL 的端口号 hostname 当前 URL 的主机名 href 完整的 URL pathname 当前 URL 的路径部分 port 当前 URL 的端口号 protocol 当前 URL 的协议 search 从问号 (?) 开始的 URL(查询部分) 如图就是取出url中的参数. JS 脚本捕获页面 GET 方式请求的参

  • javascript中的window.location.search方法简介

    window.location.search方法是截取当前url中"?"后面的字符串, 例如:index.php?act=doctor,截取后的字符串就是act=doctor

  • window.location.hash 属性使用说明

    比如http://domain/#admin的location.hash="#admin".利用这个属性值可以做一个非常有意义的事情. 很多人都喜欢收藏网页,以便于以后的浏览.不过对于Ajax页面来说的话,一般用一个页面来处理所有的事务,也就是说,如果你浏览到一个Ajax页面里边有意思的内容,想将它收藏起来,可是地址只有一个呀,下次你打开这个地址,还是得像以往一样不断地去点击网页,找到你钟情的那个页面.另外的话,浏览器上的"前进""后退"按钮也会

  • location.search在客户端获取Url参数的方法

    复制代码 代码如下: var id; function getid() { var url=location.search; var Request = new Object(); if(url.indexOf("?")!=-1) { var str = url.substr(1) //去掉?号 strs = str.split("&"); for(var i=0;i<strs.length;i++) { Request[strs[i].split(&

  • js通过location.search来获取页面传来的参数

    这篇文章主要介绍了通过window.location.search来获取页面传来的参数,经测试是OK的 function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i"); var r = window.location.search.substr(1).match(reg); if (r!=null) ret

  • 小发现之浅谈location.search与location.hash的问题

    小发现之浅谈location.search与location.hash的问题

    背景 用过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({nam

  • 浅谈Linux下通过find命令进行rm文件删除的小技巧

    我们经常会通过find命令进行批量操作,如:批量删除旧文件.批量修改.基于时间的文件统计.基于文件大小的文件统计等,在这些操作当中,由于rm删除操作会导致目录结构变化,如果要通过find结合rm的操作写成脚本,就会遇到一些麻烦,本文通过一个例子为大家进行介绍. 系统环境: SUSE Linux Enterprise Server 11 或 Red Hat Enterprise Linux 问题症状: 客户现场有一个自动化的脚本,有以下的find语句,每天运行以删除某个目录下7天以前的文件或目录,

  • 浅谈Python中re.match()和re.search()的使用及区别

    1.re.match() re.match()的概念是从头匹配一个符合规则的字符串,从起始位置开始匹配,匹配成功返回一个对象,未匹配成功返回None. 包含的参数如下: pattern: 正则模型 string : 要匹配的字符串 falgs : 匹配模式 match() 方法一旦匹配成功,就是一个match object对象,而match object对象有以下方法: group() 返回被 RE 匹配的字符串 start() 返回匹配开始的位置 end() 返回匹配结束的位置 span()返

  • 浅谈服务发现和负载均衡的来龙去脉

    浅谈服务发现和负载均衡的来龙去脉

    问题缘由 随着时代发展,单机程序遇到了计算力和存储的双重瓶颈,分布式架构应运而生.单体应用通过函数名(标识)便可轻松完成本地函数调用,在分布式系统中,服务(RPC/RESTful API)承担了类似的角色,但请求服务单靠服务名还不够,服务名只是服务能力(服务类型)的标识,还需要指示服务位于网络何处,而部署在云中的服务实例IP是动态分配的,扩缩容.失败和更新则让问题变得更加复杂,静态配置服务实例适应不了新变化,需要更精细化的服务治理能力,为了解决或者说简化这个问题,服务发现作为一种基础能力被抽象和

  • 浅谈HBuilderX开发小程序的一些问题

    浅谈HBuilderX开发小程序的一些问题

    第一步:你要有一个微信小程序,在微信开发者平台上 至于怎样申请微信开发者appid和微信开发者平台上面的东西可以自己去百度下,重点讲的是在HBuilderX开发小程序 第二步:在你的微信开发者工具里面新建一个小程序 第三步:把你新建好的项目导入到HBuilderX里面去 然后点击运行--运行到小程序模拟器,就可以自动打开微信开发者工具,就可以实现在Hbuilder开发,微信开发者工具预览.但是!!!如果一切正常的情况下是这样的,如果不正常的话,那你将很难受,好在我已经填了许多坑,我就把不正常的情

  • 浅谈vue-cli5关于yarn的一个小坑

    浅谈vue-cli5关于yarn的一个小坑

    目录 问题 解决方案 原因 问题 昨天有小伙伴下了我的 DEMO之后反映运行报错. 因为这个项目环境我测试过许多次,不管是npm还是yarn都能正常运行,所以听到运行报错时下意识地就认为是依赖没有安装成功的问题,建议他配一个淘宝镜像. 当他把报错贴上来的时候,我发现原来真不是依赖的问题,vue-cli抛出了错误如下: Error: The project seems to require yarn but it's not installed. 解决方案 报错信息已经把原因说的很清楚了:这个项目

  • 浅谈Java double 相乘的结果偏差小问题

    看下面的一段代码的运行结果: public class TestDouble { public static void main(String[] args) { double d =538.8; System.out.println(d*100); } 输出结果很意外的不是 53880 而是53879.99999999999 解决方法一: 538.8*100 用*10*10 替换,才能得到我们想要的结果 538.8*10000 用 100*100替换. 解决方法二: public class

  • 浅谈Android为RecyclerView增加监听以及数据混乱的小坑

    为 RecyclerView增加监听 1.在实现好的MyAdapter中写内部接口: public void setOnItemLongClickListener(OnItemLongClickListener onItemLongClickListener) { this.onItemLongClickListener = onItemLongClickListener; } public void setOnItemClickListener(OnItemClickListener onIt

  • 浅谈c和c++的某些小区别

    C++类型检查更加严格 c语言中,当字符当做函数参数传入是,都把字符当整型int使用,sizeof('c') = sizeof(int); 更进一步,c编译器把字符常量等同于整数常量处理: putchar(10) 同 putchar('\n') 等效. 但是,C++中, sizeof('c') == 1, 补充说明一点, sizeof(wchar_t) ==4. 因此可以很容易代表65,536个不同的Unicode字符. 另外,C++中,区别函数不仅要看他的函数名,更要看它的参数.因此,putc

  • 浅谈PHP7中的一些小技巧

    相同的命名空间,相同的 use 在 PHP 7 之前,开发者经常这么做: use Universe\Saiyan; use Universe\SuperSaiyan; 从 PHP 7 开始: use Universe\{Saiyan, SuperSaiyan}; 函数和常量也是一样的.如果它们属于同一命名空间,则可以对它们进行分组. 常量可以是数组 define('NAMES', [ 'first' => 'John', 'middle' => 'Fitzgerald', 'last' =&g

随机推荐