最近遇到一個神奇的bug,當經過路由query傳參跳轉到新的頁面時,新頁面請求接口的Request URL後面自動拼接上了query傳參html
具體以下:ios
跳轉路由是這樣的axios
let path = "********";
this.$router.push({path:path,query:{keyWord:"零食"}})
跳轉到新的頁面後新頁面全部請求接口的地址api
https://api.*********.com/?g=home_v2&m=taobaoInt&a=search&keyWord=零食
默認請求接口的地址post
https://api.*********.com/?g=home_v2&m=taobaoInt&a=search
能夠很明顯的看到路由query傳參到的頁面的接口地址被強行增長了keyWord關鍵字,就是這個關鍵字致使接口失效。this
通過查看Axios說明文檔發現能夠在請求發送以前進行攔截,因而將請求打印出來url
// 添加請求攔截器 axios.interceptors.request.use(function (config) { // 在發送請求以前作些什麼 console.log(config); return config; }, function (error) { // 對請求錯誤作些什麼 return Promise.reject(error); });
通過對比發現query傳值時,請求會自動加上params參數spa
axios默認用get傳值時用params傳參,用post傳值時,用data傳參,就是用post傳值時,url參數影響了請求地址自動加上了paramscode
所以須要在請求開始時作一個攔截就行了router
1 apiRequest.interceptors.request.use((request) => { 2 console.log(request); 3 if(request.method == 'post'){ 4 request.params = {}; 5 } 6 return request; 7 });
原文出處:https://www.cnblogs.com/hz-1762/p/10480274.html