location.search與location.hash問題
背景
轉載http://www.cnblogs.com/libin-1/p/7067813.html用過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 }
執行截圖
一切好像都沒有問題,但是由於我好奇心比較強,所有就稍微手賤了一下下,把位址列中連結的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.正則方式
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["引數名稱"]
結語
一個小小的發現,希望大家看完看完會有所印象,以後出現類似問題時,就知道是什麼原因,該如何解決
相關推薦
location.search與location.hash問題
背景 轉載http://www.cnblogs.com/libin-1/p/7067813.html 用過Vue Router的童鞋應該對路由傳參的方式多多少少有些印象,Vue Router支援兩種傳參方式:query與params;其中query方式就是動態地在路由u
JavaScript中 location.host 與 location.hostname 的區別
word ace base cati net item spa oca 端口 JavaScript 中,大多數情況下,我們不會發現 location.host 與 location.hostname 的區別,因為大多數情況下,我們的網頁用的是 80 端口。 他們的區別:
js中window.location.search的用法和作用。
bst 地址 用法 屬性獲取 net bstr src log 協議 用該屬性獲取頁面 URL 地址: window.location 對象所包含的屬性 屬性描述 hash 從井號 (#) 開始的 URL(錨) host 主機名和當前 URL 的端口號 h
window.location.hostname與 window.location.host 區別
oca span blog ati 區別 window name style pos /** * window.location.hostname 不帶端口號 * window.location.host 帶 */ window.location.hostna
Angular 通過註入 $location 獲取與修改當前頁面URL
rip clip comm source font float back 屬性 margin 以下獲取與修改的 URL 以 ( http://172.16.0.88:8100/#/homePage?id=10&a=100 ) 為例 【一】獲取 (不修改URL)
window.location屬性用法及解決一個window.location.search為什麽為空的問題
循環 圖片 意義 註意 腳本 htm pre ear alt 通常用window.location該屬性獲取頁面 URL 地址: 1、什麽是window.location? 比如URL:http://b.a.com:88/index.php?name=kang&am
JavaScript獲取從上個頁面傳過來的url引數:GetQueryString()方法和window.location.search方法
如下,當loadContractInfo()方法被呼叫時,將跳轉到指定頁面blackViewContract.html 並傳三個引數(contractId、state、identity)過去 function loadContractInfo(contractId,state,i
location.search 表單提交的內容處理為物件
<!DOCTYPE HTML> <html> <head> <title>事件處理</title> <meta charset="utf-8" /> </head> <body> <a h
兩個html之間的值傳遞(js location.search用法)
將兩個HTML放到同一個資料夾下,自己引入jquery的包。先開啟a.html點選”傳值”按鈕,看b.html中是否接收到值。 原理: 從a.html根據: window.location.href
程式設計-解析Location.search查詢字串
Location.search返回的字串以‘ ?’開頭,各引數間以‘&’相連,如url?a=1&b=2 //解析查詢字串 function getQueryStringArgs() { //取得查詢字串,並
Angular 通過注入 $location 獲取與修改當前頁面URL
以下獲取與修改的 URL 以 ( http://172.16.0.88:8100/#/homePage?id=10&a=100 ) 為例 【一】獲取 (不修改URL) //
使用location.search解析URL中?後的請求資訊
客戶端網站向伺服器傳送請求時常常會攜帶一些請求資訊,開發人員通常會使用get請求向伺服器傳送資訊,這些資訊常常以鍵值對的方式新增在URL的?之後,而location物件的search屬性可以獲取到這段字串,但是我們想要的是鍵值對中的值,而不是整個鍵值對,這就要通
js之將location.search轉化為物件
function change(str) { if(str == undefined) return str = str.substr(1) var arr = str.split("&"), obj = {}, newA
location.search在客戶端獲取Url引數的方法
location.search是從當前URL的?號開始的字串如:http://www.baidu.com/s?wd=baidu&cl=3它的search就是?wd=baidu&cl=3 如: location.search.substr(1).split("&")[0]可以返回第一個
location.reload() 和 location.replace()的區別和應用
pan 內存 創建 trac 訪問 親測 能夠 不能 ace 首先介紹兩個方法的語法: reload 方法,該方法強迫瀏覽器刷新當前頁面。語法: location.reload([bForceGet])
九章演算法筆記 8.雜湊表與堆 Hash & Heap
大綱 cs3k.com 資料結構概述 雜湊表 Hash: a.原理 b.應用 堆 Heap: a.原理 b.應用-優先佇列 Priority Queue c.替代品-TreeMap 資料結構的兩類問題 cs3k
IFeatureClass.Search 與IFeatureClass.Update的區別
(1) IFeatureClass.Search方法 返回一個物件遊標,可用於獲取指定查詢選擇的要素物件。 搜尋將返回IFeatureCursor,其中包含滿足IQueryFilter引用指定的屬性和/或空間約束的所有功能。如果將null值傳遞給filter引數,則特徵游標將返回要素類中
專案總結關於location.replace和location.href的區別
window.location.replace和window.location.href都可以實現頁面的跳轉,但是它們是有區別的,具體區別如下: 假如有三個頁面a b c 按照頁面的跳轉順序是 a => b => c b => c在從頁面b跳轉到頁面c時,如果是
搞懂分散式技術11:分散式session解決方案與一致性hash
session一致性架構設計實踐 原創: 58沈劍 架構師之路 2017-05-18 一、緣起 什麼是session? 伺服器為每個使用者建立一個會話,儲存使用者的相關資訊,以便多次請求能夠定位到同一個上下文。 Web開發中,web-server可以自動為同
hash與字串hash入門
一.hash的引入. 考慮一個問題,給定n( 1 ≤ n