小發(fā)現(xiàn)之淺談location.search與location.hash的問題

更新時間：2017年06月23日 08:08:15 投稿：jingxian

下面小編就為大家?guī)硪黄“l(fā)現(xiàn)之淺談location.search與location.hash的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

背景

用過Vue Router的童鞋應該對路由傳參的方式多多少少有些印象，Vue Router支持兩種傳參方式：query與params；其中query方式就是動態(tài)地在路由url后面追加參數(shù)，就是http的get請求方式；那Vue Router與location的search和hash有什么關(guān)系呢？

正題

首先我們先來看一下query方式傳參

路由A

// 跳轉(zhuǎn)到detail路由頁
let query = {
   name: abc,
   age: 23     
}
this.$router.push({name: 'detail', query: query})

路由detail

 created(){
  // 打印query參數(shù)
  alert(JSON.stringify(this.$route.query))    
 }

運行截圖

一切好像都沒有問題，但是由于我好奇心比較強，所有就稍微手賤了一下下，把地址欄中鏈接的detail和query交換了一下位置，于是就出現(xiàn)了下面的情況，見截圖

感覺可能是Vue Router的問題（人家Router已經(jīng)自動把query加在hash后面了，你非要交換位置，似不似傻），在日常使用Vue Router時只要我們的url不是手動把query和hash交換位置，就不會出現(xiàn)問題；這里真正要說的是，在傳統(tǒng)模式開發(fā)中，如果在url中search與hash同事存在，并且你要用到這些query時，你的hash值一定要放在query后面，下面我們以百度頁面演示一下

情況一：query在hash前面

情況二：query在hash后面

結(jié)果證明，當query在hash后面時，連內(nèi)置對象location自身都取不到query，難道你有什么好的辦法嗎，所有我們要避免情況二

常用取url參數(shù)的方法（網(wǎng)上搜的）

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;
}
 
// 調(diào)用方法
alert(GetQueryString("參數(shù)名1"));
alert(GetQueryString("參數(shù)名2"));
alert(GetQueryString("參數(shù)名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; 
}

// 調(diào)用方式
var urlParams = GetRequest();
urlParams["參數(shù)名稱"]

結(jié)語

一個小小的發(fā)現(xiàn)，希望大家看完看完會有所印象，以后出現(xiàn)類似問題時，就知道是什么原因，該如何解決

以上這篇小發(fā)現(xiàn)之淺談location.search與location.hash的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: