使用dva routerRedux.push跳轉頁面攜帶引數時請求兩次問題
發現問題
頁面使用routerRedux.push([path])進行跳轉,部分頁面跨頁傳參也是使用這種方式,然後發現了一個很奇怪的現象,部分頁面接受引數後,執行兩次subscriptions,所以導致兩次請求。在dva的issues裡面看到了2016年有人提過這個問題,並被列為bug解決了。很奇怪在這為什麼復現了。
尋找原因
想知道從頁面載入到請求結束到底發生了什麼,這就要藉助工具了----Redux devTools,是用它可以記錄整個過程並進行回放,在回放裡發現了原因:
圖中標記的就是進入頁面後發出的兩次請求,對比後發現,兩次的pathName有所不同,第一次裡面有漢字,而第二個裡面漢字被編碼了。是不是因為漢字的原因呢?
驗證
將URL引數裡面的漢字在push前使用encodeURL轉碼,果然,頁面只有一次請求了。
查詢資料
只有字母和數字[0-9a-zA-Z]、一些特殊符號"$-_.+!*’(),"[不包括雙引號]、以及某些保留字,才可以不經過編碼直接用於URL。
解決問題
將所有涉及漢字的引數使用encodeURL轉碼,在使用時使用decodeURL轉換回來。
相關推薦
使用dva routerRedux.push跳轉頁面攜帶引數時請求兩次問題
發現問題 頁面使用routerRedux.push([path])進行跳轉,部分頁面跨頁傳參也是使用這種方式,然後發現了一個很奇怪的現象,部分頁面接受引數後,執行兩次subscriptions,所以導致兩次請求。在dva的issues裡面看到了2016年有人提過
vue.js中router.push跳轉頁面、帶引數、設定引數的方法
router.push(location) 在vue.js中想要跳轉到不同的 URL,需要使用 router.push 方法。 這個方法會向 history 棧新增一個新的記錄,當用戶點選瀏覽器後退按鈕時,則回到之前的 URL。 當你點選 <router-link> 時,這個
vue-router 跳轉頁面傳遞引數並獲取引數
一、跳轉頁面 有些時候我們從A頁面跳轉到B頁面需要傳遞一個或多個引數,例如從列表頁進入詳情頁 程式碼: <router-link :to="{path:'/detail',query:{id:item.id,a:1}}">
關於vue路由跳轉頁面帶引數方法總結
因為最近專案有這樣一個需求:在首頁導航欄顯示訊息數,點選每一條未讀訊息帶著引數跳轉到相應頁面進行顯示,網上查了好些辦法,比如a元件跳轉到b元件: 對於a元件有幾種方式: 1.純頁面跳轉 <template> <div> <router-lin
釘釘e應用跳轉頁面,引數為Object時的傳參
首先將要傳的物件轉成json格式 例,url: '../examBasicInfo/index?obj=' + JSON.stringify(Object) 接收時把json格式轉換成要用的物件 例,onLoad(query){ console.log(JSON
Extjs 跳轉頁面帶引數並執行查詢操作的實現
如上,點選檢視物流會跳轉到另一個介面,且將物流單號的值傳遞到下一個介面,下一個介面根據物流單號自動查詢到對應的資訊. ok,開擼 { header : "檢視物流",
1秒後跳轉頁面(延時setTimeout)
下面的程式碼將在1000毫秒後執行雙引號中的函式,跳轉頁面。 Code: <script language="javascript"> setTimeout("loc
vue的this.$router.push()方法跳轉路由帶引數
這個方法需要注意一點,path和params不能同時使用使用了path,params就失效了 解決方法 加入 路由a 跳轉到 路由b 路由a this.$router.push({&nb
跳轉頁面跨域傳遞引數
頁面a的網站地址為:http://localhost:8080/a.html 頁面b的網站地址為:http://localhost:63342/Demo1/testCRS/b.html?name=tony&age=23 其中,name和age是跨域傳遞的引數。 1.結果展示圖 頁
Android中使用Intent實現一般頁面跳轉和帶引數頁面跳轉
一、Intent介紹 Intent的理解 Intent, 直譯為意圖, 也就是你想要做什麼或想要去哪? Intent是Activity, Service和BroadcastReceiver這三個應用元
Vue用router.push(傳參)跳轉頁面,參數改變,跳轉頁面數據不刷新的解決辦法
ren osi pat 出現 響應 router 手機 dep code vue-router同路由$router.push不跳轉一個簡單解決方案 vue-router跳轉一般是這麽寫: goPage(ParentDeptCode2,DeptCode2,hosName,
AngularJS進階 八 實現頁面跳轉並進行引數傳遞
angularjs實現頁面跳轉並進行引數傳遞 注:請點選此處進行充電! Angular頁面傳參有多種辦法,我在此列舉4種最常見的: 1. 基於ui-router的頁面跳轉傳參 (1) 在AngularJS的app.js中用ui-router定義路由,比如現在
利用js進行頁面跳轉及傳遞引數的獲取
頁面A跳轉到頁面B及攜帶引數 window.location.href="../SystemInfoJsp/add_user.jsp?"+"id="+id+"&name="+name+"&grade="+grade; 解釋: "../SystemInfoJsp/add
[removed].href 跳轉頁面時傳遞引數並且在新頁面接收引數
可以直接使用window.location.href進行頁面跳轉 window.location.href = "./punch/clock_frm.html" 問號傳參: window.location.href = "./punch/clock_frm.html?modF
GridView實現超連結列和圖片列,跳轉頁面並傳遞引數
「注意!請勿私自轉載!」 最近在使用ASP.NET建設網站,需要解決如標題所示的問題,上網可以搜出很多答案。現在簡單總結一下我的解決辦法,方便各位取用,有任何疑問歡迎提出交流。 (注:使用V
spring mvc redirect 重定向 跳轉並傳遞引數 && mvc:view-controller直接轉發頁面
在專案中做form表單功能提交時,防止使用者客戶端後退或者重新整理時重複提交問題,需要在服務端進行重定向跳轉,具體跳轉方式有以下幾種方式: 公用程式碼: Java程式碼 @RequestMapping(value="/index",method = { Reque
angularjs實現頁面跳轉並進行引數傳遞
Angular頁面傳參有多種辦法,我在此列舉4種最常見的: 1. 基於ui-router的頁面跳轉傳參 (1) 在AngularJS的app.js中用ui-router定義路由,比如現在有兩個頁面,一個頁面(producers.html)放置了多個producers,點選其
MUI預載入頁面跳轉並傳遞引數的問題,Uncaught Error: webview[某個頁面的id] does not exist
最近剛剛入門mui,學習慕課上仿豆瓣app,但是在預載入和跳轉頁面中出現了以下問題。 Uncaught Error: webview[某個頁面的id] does not exist 具體程式碼如下: //預載入電影詳
JavaScript帶引數跳轉頁面
<script type="text/javascript"> function keyTextBlur() { document.getElementById("txtKey").value = ""; document.getEl
ASP.NET MVC進行頁面跳轉並傳遞引數
第一種方法: return Content(string.Format("<script>alert('上傳成功');parent.window.location='/控制器名稱/Action方法名?引數={0}';</script>", 傳遞的引數)