vue中傳參params和data的區(qū)別
更新時(shí)間：2022年04月20日 09:04:03 作者：小碼哥呀
本文主要介紹了vue中傳參params和data的區(qū)別，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
1、使用data傳參
前端請(qǐng)求方式為post
import request from '@/utils/request'
// 新增banner
export function saveBanner(data){
return request({
url:'/system/banner/saveBanner',
method:'post',
data:data
})
}
后端接口接收
/**
* 保存導(dǎo)航圖
*
* @param sysBanner
* @return
*/
@PostMapping("/saveBanner")
public AjaxResult saveBanner(@RequestBody SysBanner sysBanner) {
return sysBannerService.saveBanner(sysBanner);
}
2、使用params傳參
前端請(qǐng)求
//查詢導(dǎo)航圖列表信息
export function getBannerList(query){
return request({
url: '/system/banner/list',
method: 'get',
params: query
})
}
后端接收
- 接收時(shí)的請(qǐng)求方式為GetMapping
- 并且入?yún)⒁膊恍枰狜RequestBody注解
3、總而言之
如果前端請(qǐng)求的方式是 post，并且后端的HTTP請(qǐng)求為 @PostMapping，那么后端的參數(shù)上面要寫 @RequestBody ，而且前端傳遞參數(shù)的時(shí)候要寫 data，因?yàn)槭?Json 傳參。 因?yàn)橛胮ost請(qǐng)求使用data傳參的時(shí)候，參數(shù)是放在請(qǐng)求體中的，所以地址欄上也不顯示具體的參數(shù)。
如果是以get形式的傳參，并且傳的是一個(gè)對(duì)象，就用params，他會(huì)把你參數(shù)的內(nèi)容 最后分散到你地址欄后面的問號(hào)（？）后面，如上面的例子最后的地址就是：http://localhost:8888/user/list/1/20?name=zhansan
到此這篇關(guān)于vue中傳參params和data的區(qū)別的文章就介紹到這了,更多相關(guān)vue 傳參params和data內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue.js watch監(jiān)視屬性知識(shí)點(diǎn)總結(jié)
在本篇文章里小編給大家分享的是關(guān)于Vue.js watch監(jiān)視屬性的相關(guān)知識(shí)點(diǎn)內(nèi)容，需要的朋友們學(xué)習(xí)下。2019-11-11
使用Vue.js和Element-UI做一個(gè)簡單登錄頁面的實(shí)例
下面小編就為大家分享一篇使用Vue.js和Element-UI做一個(gè)簡單登錄頁面的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue如何將base64流數(shù)據(jù)轉(zhuǎn)成pdf文件并在新頁面打開
這篇文章主要介紹了vue如何將base64流數(shù)據(jù)轉(zhuǎn)成pdf文件并在新頁面打開問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
本文主要介紹了vue3使用reactive賦值后頁面不改變，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
vue中使用element組件時(shí)事件想要傳遞其他參數(shù)的問題
這篇文章主要介紹了vue中使用element組件時(shí)事件想要傳遞其他參數(shù)的問題,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-09-09
這篇文章主要介紹了Vue使用electron生成桌面應(yīng)用過程，很想使用 electron 制作一個(gè)桌面應(yīng)用，但是真的上手使用的時(shí)候才發(fā)現(xiàn) electron 的坑實(shí)在是太多了，先將遇到的坑記錄在這里，遇到一個(gè)記錄一個(gè)2023-04-04
這篇文章主要介紹了vue中的v-if和v-show的區(qū)別詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
vue中keep-alive內(nèi)置組件緩存的實(shí)例代碼
這篇文章主要介紹了vue中的keep-alive內(nèi)置組件緩存，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04
vue 生成gzip壓縮包部署到nginx服務(wù)器，如果我們把web網(wǎng)站資源進(jìn)行g(shù)zip壓縮后進(jìn)行傳輸給瀏覽器，這樣就能加快網(wǎng)站資源的加載速度，這篇文章主要介紹了vue生成gzip壓縮包部署到nginx,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue封裝swiper代碼實(shí)例解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10