vue中傳參params和data的區(qū)別
更新時間：2022年04月20日 09:04:03 作者：小碼哥呀
本文主要介紹了vue中傳參params和data的區(qū)別，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
1、使用data傳參
前端請求方式為post
import request from '@/utils/request'
// 新增banner
export function saveBanner(data){
return request({
url:'/system/banner/saveBanner',
method:'post',
data:data
})
}
后端接口接收
/**
* 保存導航圖
*
* @param sysBanner
* @return
*/
@PostMapping("/saveBanner")
public AjaxResult saveBanner(@RequestBody SysBanner sysBanner) {
return sysBannerService.saveBanner(sysBanner);
}
2、使用params傳參
前端請求
//查詢導航圖列表信息
export function getBannerList(query){
return request({
url: '/system/banner/list',
method: 'get',
params: query
})
}
后端接收
- 接收時的請求方式為GetMapping
- 并且入?yún)⒁膊恍枰狜RequestBody注解
3、總而言之
如果前端請求的方式是 post，并且后端的HTTP請求為 @PostMapping，那么后端的參數(shù)上面要寫 @RequestBody ，而且前端傳遞參數(shù)的時候要寫 data，因為是 Json 傳參。 因為用post請求使用data傳參的時候，參數(shù)是放在請求體中的，所以地址欄上也不顯示具體的參數(shù)。
如果是以get形式的傳參，并且傳的是一個對象，就用params，他會把你參數(shù)的內(nèi)容 最后分散到你地址欄后面的問號（？）后面，如上面的例子最后的地址就是：http://localhost:8888/user/list/1/20?name=zhansan
到此這篇關于vue中傳參params和data的區(qū)別的文章就介紹到這了,更多相關vue 傳參params和data內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue實現(xiàn)動態(tài)添加數(shù)據(jù)滾動條自動滾動到底部的示例代碼
本篇文章主要介紹了vue實現(xiàn)動態(tài)添加數(shù)據(jù)滾動條自動滾動到底部的示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
這篇文章主要介紹了vue中elementUI表單循環(huán)驗證方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
解決Element中el-date-picker組件不回填的情況
這篇文章主要介紹了解決Element中el-date-picker組件不回填的情況，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
element ui中表單el-form的label如何設置寬度
這篇文章主要介紹了element ui中表單el-form的label如何設置寬度，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
在vue-cli 3中給stylus、sass樣式傳入共享的全局變量
這篇文章主要介紹了在vue-cli 3中， 給stylus、sass樣式傳入共享的全局變量,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-08-08
el-form resetFields無效和validate無效的可能原因及解決方法
本文主要介紹了el-form resetFields無效和validate無效的可能原因及解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
這篇文章主要為大家介紹了Vue3 構建 Web Components使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要介紹了基于VUE實現(xiàn)判斷設備是PC還是移動端,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-07-07
這篇文章主要介紹了vue3中Fragment特性的一個bug，需要留意的注意事項示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2024-01-01
vue中利用simplemde實現(xiàn)markdown編輯器（增加圖片上傳功能）
這篇文章主要介紹了vue中利用simplemde實現(xiàn)markdown編輯器（增加圖片上傳功能）,本文通過實例代碼相結合的形式給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04