用過(guò)Vue Router的童鞋應(yīng)該對(duì)路由傳參的方式多多少少有些印象，Vue Router支持兩種傳參方式：query與params；其中query方式就是動(dòng)態(tài)地在路由url后面追加參數(shù)，就是http的get請(qǐng)求方式；那Vue Router與location的search和hash有什么關(guān)系呢？
正題
首先我們先來(lái)看一下query方式傳參
路由A
// 跳轉(zhuǎn)到detail路由頁(yè) let query = { name: abc, age: 23 } this.$router.push({name: 'detail', query: query})
路由detail
created(){ // 打印query參數(shù) alert(JSON.stringify(this.$route.query)) }
運(yùn)行截圖
一切好像都沒(méi)有問(wèn)題，但是由于我好奇心比較強(qiáng)，所有就稍微手賤了一下下，把地址欄中鏈接的detail和query交換了一下位置，于是就出現(xiàn)了下面的情況，見截圖
感覺可能是Vue Router的問(wèn)題（人家Router已經(jīng)自動(dòng)把query加在hash后面了，你非要交換位置，似不似傻），在日常使用Vue Router時(shí)只要我們的url不是手動(dòng)把query和hash交換位置，就不會(huì)出現(xiàn)問(wèn)題；這里真正要說(shuō)的是，在傳統(tǒng)模式開發(fā)中，如果在url中search與hash同事存在，并且你要用到這些query時(shí)，你的hash值一定要放在query后面，下面我們以百度頁(yè)面演示一下
情況一：query在hash前面
情況二：query在hash后面
結(jié)果證明，當(dāng)query在hash后面時(shí)，連內(nèi)置對(duì)象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ù)名稱"]