91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Vue中location.search與location.hash的示例分析

發布時間:2021-07-21 11:58:08 來源:億速云 閱讀:1746 作者:小新 欄目:web開發

這篇文章給大家分享的是有關Vue中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))    
 }

運行截圖

Vue中location.search與location.hash的示例分析

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

Vue中location.search與location.hash的示例分析

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

情況一:query在hash前面

Vue中location.search與location.hash的示例分析

情況二:query在hash后面

Vue中location.search與location.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["參數名稱"]

感謝各位的閱讀!關于“Vue中location.search與location.hash的示例分析”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

邹城市| 垫江县| 青浦区| 交口县| 龙门县| 静安区| 德令哈市| 都昌县| 特克斯县| 博湖县| 田林县| 鲁甸县| 怀安县| 横峰县| 稻城县| 安新县| 绩溪县| 醴陵市| 四川省| 当涂县| 峨眉山市| 定结县| 同心县| 元阳县| 云安县| 监利县| 焦作市| 鄂尔多斯市| 蒲江县| 慈溪市| 曲松县| 阿瓦提县| 卢氏县| 汽车| 桂林市| 兴和县| 江油市| 仁布县| 江华| 五大连池市| 奇台县|