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

背景

背景

用过Vue Router的童鞋应该少量由传参的情势多多少少有些印象,Vue
Router帮衬三种传参格局:query与params;个中query情势便是动态地在路由url前边增添参数,便是http的get请求格局;那Vue
Router与location的search和hash有怎么着关联啊?

vue传参方法一

用过Vue Router的童鞋应该适用由传参的格局多多少少有个别印象,Vue
Router援救三种传参形式:query与params;在那之中query方式正是动态地在路由url前边扩充参数,就是http的get请求格局;那Vue
Router与location的search和hash有何关联吧?

正题

首先大家先来看一下query情势传参

路由A

1 // 跳转到detail路由页
2 let query = {
3      name: abc,
4      age: 23          
5 }
6 this.$router.push({name: 'detail', query: query})

路由detail

1 created(){
2   // 打印query参数
3   alert(JSON.stringify(this.$route.query))        
4 }

运行截图

金沙js333娱乐场 1

一体就好像都未曾难题,不过出于小编好奇心相比较强,全部就多少手贱了一晃下,把地方栏中链接的detail和query沟通了须臾间位置,于是就出现了下边包车型客车事态,见截图

金沙js333娱乐场 2

 

深感或然是Vue
Router的难题(人家Router已经自行把query加在hash后边了,你非要调换个地方置,似不似傻),在一般行使Vue
Router时只要大家的url不是手动把query和hash沟通个地点置,就不会出现难题;这里实在要说的是,在古板格局开荒中,若是在url中search与hash同事存在,并且你要用到那一个query时,你的hash值一定要放在query后边,上边我们以百度页面演示一下

金沙js333娱乐场 ,情况一:query在hash前面

金沙js333娱乐场 3

情况二:query在hash后面

金沙js333娱乐场 4

结果证实,当query在hash前面时,连内置对象location本身都取不到query,难道你有怎样好的点子啊,全体大家要幸免事态二

1,路由安顿

正题

常用取url参数的艺术(网络搜的)

1.正则格局

 1 function GetQueryString(name)
 2 {
 3      var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
 4      var r = window.location.search.substr(1).match(reg);
 5      if(r!=null)return  unescape(r[2]); return null;
 6 }
 7  
 8 // 调用方法
 9 alert(GetQueryString("参数名1"));
10 alert(GetQueryString("参数名2"));
11 alert(GetQueryString("参数名3"));

2.字符串方式

 1 function GetRequest() { 
 2   var url = location.search; //获取url中"?"符后的字串 
 3   var theRequest = new Object(); 
 4   if (url.indexOf("?") != -1) { 
 5     var str = url.substr(1); 
 6     strs = str.split("&"); 
 7     for(var i = 0; i < strs.length; i ++) { 
 8       theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]); 
 9     } 
10   } 
11   return theRequest; 
12 }
13 
14 // 调用方式
15 var urlParams = GetRequest();
16 urlParams["参数名称"]

 

 {
  path: '/describe/:id',
  name: 'Describe',
  component: Describe
 }

率先大家先来看一下query格局传参

结语

贰个非常的小的意识,希望我们看完看完会有所印象,未来出现就像主题素材时,就理解是哪些来头,该怎么着缓解

 

2,使用办法

路由A

// 直接调用$router.push 实现携带参数的跳转
 this.$router.push({
// 这个id是一个变量,随便是什么值都可以
 path: /describe/${id}`,
 })
// 跳转到detail路由页
let query = {
   name: abc,
   age: 23     
}
this.$router.push({name: 'detail', query: query})

3,获取情势(在describe页面)

路由detail

$route.params.id
 created(){
  // 打印query参数
  alert(JSON.stringify(this.$route.query))    
 }

行使上述措施能够得到上个页面传过来的id值

运作截图

vue传参方法二

金沙js333娱乐场 5

 1,路由布署

整套看似都不曾难题,然则出于作者好奇心比较强,全部就不怎么手贱了一晃下,把地址栏中链接的detail和query调换了须臾间地方,于是就应际而生了下边包车型地铁事态,见截图

 {
  path: '/describe',
  name: 'Describe',
  component: Describe
 }
(这个地方默认配置就可以了,不用做任何的处理)

金沙js333娱乐场 6

2,使用方法

倍感只怕是Vue
Router的难点(人家Router已经自行把query加在hash后面了,你非要沟通个方式置,似不似傻),在日常使用Vue
Router时只要大家的url不是手动把query和hash调换个地点置,就不会冒出难题;这里真的要说的是,在古板情势开采中,倘诺在url中search与hash同事存在,并且你要用到这么些query时,你的hash值一定要放在query前面,下边大家以百度页面演示一下

  this.$router.push({
   name: 'Describe',
   params: {
   id: id
   }
  })

情况一:query在hash前面

父组件中:通过路由属性中的name来规定相称的路由,通过params来传递参数。

金沙js333娱乐场 7

 3,获取格局(在describe页面)

情况二:query在hash后面

$route.params.id

金沙js333娱乐场 8

也用params获取就足以了;

结果印证,当query在hash后边时,连内置对象location本人都取不到query,难道你有怎样好的办法吗,全数大家要防止事态二

vue传参方法三

发表评论

电子邮件地址不会被公开。 必填项已用*标注