接收某項課程id,通過axios發起get請求,由於攜帶params出現的問題(已解決)

問題:在最新課程頁面(NewBook.vue)點擊某一項課程,通過傳遞該課程的 id 跳轉至課程詳情頁(Bookdetail.vue),採取的跳轉方式是聲明式導航,即 <router-link :to=”{ path: ‘/newcourse’, query: { id: item.courseCode } }”></router-link>

先看最新課程頁面程式碼:

 下面是詳情頁面程式碼,使用async發起非同步請求,接收數據是沒有問題的

 

 

 

 但是在使用axios.then接收數據的時候出現了問題,

 

 

 

 於是百度查詢,看到了一個類似的程式碼,但是它能正常接收數據,它的程式碼如下:

 

 發現它的請求路徑沒有攜帶params參數,是把id拼接到路徑當中,於是我也嘗試使用拼接,去掉params參數,果然成功了

 

 

 

但是為什麼不能使用params參數呢?百度之後終於找到原因了!參考//segmentfault.com/q/1010000014743286

解決方法:當我們使用params參數時,此時發起的網路請求路徑是這樣的:

 

 當我們不使用params,而是採取路徑拼接,路徑是這樣的:

 

 我們可以看出明顯的區別!!!其實問題就出在請求路徑上面了,後台的介面設置是這樣的:

 

它並沒有設置需要傳遞params,所以對params參數沒有進行處理,當我們傳遞params的時候,路徑里會含有?id=,所以請求不到數據

所以在使用axios發起get請求的時候,需要根據後台介面設置來判斷是否需要傳遞params,好了,問題解決,可以安心睡覺覺了,晚安~

Tags: