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.js watch監(jiān)視屬性知識點總結(jié)
在本篇文章里小編給大家分享的是關于Vue.js watch監(jiān)視屬性的相關知識點內(nèi)容，需要的朋友們學習下。2019-11-11
使用Vue.js和Element-UI做一個簡單登錄頁面的實例
下面小編就為大家分享一篇使用Vue.js和Element-UI做一個簡單登錄頁面的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue如何將base64流數(shù)據(jù)轉(zhuǎn)成pdf文件并在新頁面打開
這篇文章主要介紹了vue如何將base64流數(shù)據(jù)轉(zhuǎn)成pdf文件并在新頁面打開問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
本文主要介紹了vue3使用reactive賦值后頁面不改變，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
vue中使用element組件時事件想要傳遞其他參數(shù)的問題
這篇文章主要介紹了vue中使用element組件時事件想要傳遞其他參數(shù)的問題,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-09
這篇文章主要介紹了Vue使用electron生成桌面應用過程，很想使用 electron 制作一個桌面應用，但是真的上手使用的時候才發(fā)現(xiàn) electron 的坑實在是太多了，先將遇到的坑記錄在這里，遇到一個記錄一個2023-04-04
這篇文章主要介紹了vue中的v-if和v-show的區(qū)別詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
vue中keep-alive內(nèi)置組件緩存的實例代碼
這篇文章主要介紹了vue中的keep-alive內(nèi)置組件緩存，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
vue 生成gzip壓縮包部署到nginx服務器，如果我們把web網(wǎng)站資源進行gzip壓縮后進行傳輸給瀏覽器，這樣就能加快網(wǎng)站資源的加載速度，這篇文章主要介紹了vue生成gzip壓縮包部署到nginx,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue封裝swiper代碼實例解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-10-10