小发现之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问题的更多相关文章
- One difference between AngularJS' $location and window.location
Recenently, I encountered a problem. Client side code is: $http({ url: "/api/runtimelicense&quo ...
- javascript中window.location.search的用法和作用。
用该属性获取页面 URL 地址: window.location 对象所包含的属性 属性 描述 hash 从井号 (#) 开始的 URL(锚) host 主机名和当前 URL 的端口号 hostnam ...
- window.location.search 在url中有?name=value时仍为‘’的情况
1,当页面有hash#值 而?name=value在hash #的串后面将会有这种结果 2,为什么 window.location.search 为空? 答:注意上面的search和hash的区别,如 ...
- location search的中文加密
最近项目中遇到一个这样问题,在页面跳转时,追加了location.search,有中文字符,但是在分享第二次时,这个链接无法获取中文字段,变成乱码. 仔细对比,发现在页面分享时,浏览器自动对中文进行了 ...
- window.location属性用法及解决一个window.location.search为什么为空的问题
通常用window.location该属性获取页面 URL 地址: 1.什么是window.location? 比如URL:http://b.a.com:88/index.php?name=kang& ...
- js中window.location.search的用法和作用。
用该属性获取页面 URL 地址: window.location 对象所包含的属性 属性 描述 hash 从井号 (#) 开始的 URL(锚) host 主机名和当前 URL 的端口号 hostnam ...
- 为什么 window.location.search 为空?
1,什么是window.location?示例 URL:http://b.a.com:88/index.php?name=kang&when=2011#first 属性 含义 值 protoc ...
- js中window.location.search的用法和作用
用该属性获取页面 URL 地址: window.location 对象所包含的属性 属性 描述 hash 从井号 (#) 开始的 URL(锚) host 主机名和当前 URL 的端口号 hostnam ...
- window.location.search 为何在url 带# 号时获取不到 ?
我们在获取url参数时,会常常用到截取参数 getUrlParam(name) { const reg = new RegExp('(^|&)' + name + '=([^&]*)( ...
随机推荐
- poj2566尺取变形
Signals of most probably extra-terrestrial origin have been received and digitalized by The Aeronaut ...
- 576. Out of Boundary Paths
Problem statement: There is an m by n grid with a ball. Given the start coordinate (i,j) of the ball ...
- #pragma mark指令的作用
概述: 可以简单地给代码进行一个分组,方便代码的查找(可以不用记,无所谓的小东西) 例如: #pragma mark dog类的声明 @interface Dog :NSObject @end @im ...
- for循环-0,1,1,2,2可以组成多少个不重复的五位数?
今天想到了一个比较有意思的for循环题:0,1,1,2,2可以组成多少个不重复的五位数? 它主要是for循环多层嵌套外加if判断,代码如下: protected void Button1_Click( ...
- HDU4704Sum 费马小定理+大数取模
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4704 题目大意: 看似复杂,其实就是求整数n的划分数,4=1+1+2和4=1+2+1是不同的.因而可 ...
- [笔记]ACM笔记 - 组合数
一.高中数学公式复习 , (好吧这个没学过但是既然看到了就一并抄过来了) 二.快速求组合数取模C(n, m)%p 当n和p大小不同时方法有不同. 1. n很小,p随意,p不需要为素数 1) 原理 使用 ...
- 使用Github Page鼓励自己每日编程
动机 三天不练手生,编程的基础训练本身是很枯燥的,需要很多的认真与坚持.无论是Debug的经验,语法规则的记忆,还是各类基础的算法运用,都需要持之以恒的认真.Github的"打卡" ...
- HiveHbase集成实践
作者:Syn良子 出处:http://www.cnblogs.com/cssdongl/p/6857891.html 转载请注明出处 简单的说就是可以通过Hive SQL直接对hbase的表进行读写操 ...
- tomcat流程原理解析
tomcat的启动是通过Bootstrap类的main方法(tomcat6开始也可以直接通过Catlina的main启动) Bootstrap的启动 Bootstrap的main方法先new了一个自己 ...
- 【持久化框架】Mybatis简介与原理
从这篇博文开始我们学习一下Mybatis,希望大家提出宝贵的建议. 什么是Mybatis MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache softwar ...