Vue與Axios的傳參方式實(shí)例詳解
更新時(shí)間：2022年08月02日 09:39:52 作者：筍干zzZ~
現(xiàn)在vue項(xiàng)目基本上都是使用axios進(jìn)行請求操作,下面這篇文章主要給大家介紹了關(guān)于Vue與Axios的傳參方式的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
Vue的傳參方式:
1.通過name來傳遞參數(shù)
在router下的index.js
{
path: '/hello',
name: 'HelloWorld',
component:HelloWorld,
},
在外部的對應(yīng)的.vue中可以獲取值
<h2>{{$route.name}}</h2>
2.通過路徑的方式進(jìn)行傳參，需要在在路由配置中占位
2.1、通過v-bind:to的方式進(jìn)行傳參采取params:{key:value}(路徑傳參)
傳值：
<!--用了params是不允許寫path的，烏龜?shù)钠ü桑?->
<router-link :to="{name:'hi',params:{id:33}}">by ':to' way transfer parameters</router-link>
占位：
{
name: 'hi',
path: '/hello/:id',
component:HelloWorld,
},
接收值：
<h2>{{$route.params.id}}</h2>
2.2、直接將參數(shù)寫在路徑上進(jìn)行傳參
傳值：
<router-link to="/java/1/天下第一">by 'url' way transfer parameters</router-link>
<router-link :to="`/java/${user.id}/${user.des}`">by 'url' way transfer parameters</router-link>
占位：
{
path:'/java/:id/:des',
name:'java',
component:Java
}
接收值:
<h2>{{$route.params.id}}</h2>
<h2>{{$route.params.des}}</h2>
3.通過v-bind:to的方式進(jìn)行傳參采取query:{key:value}(問號傳參)
傳值：
<router-link :to="/to/hi?id=33">by ':to' way transfer parameters</router-link>
<router-link :to="`/to/hi?id=${user.id}`">by ':to' way transfer parameters</router-link>
<router-link :to="{path:'/to/hi',query:{id:33}}">by ':to' way transfer parameters</router-link>
<router-link :to="{name:'hi',query:{id:33}}">by ':to' way transfer parameters</router-link>
占位：問號傳參不需要路由占位。
接收值：
<h2>{{$route.query.id}}</h2>
4.編程式導(dǎo)航，這是最常用的方式
傳值：
<button @click="lol()">by 'programming' way transfer parameters</button>
<script>
methods:{
lol:function () {
//'programming' way A common way
//注意:這里是router！！！不是route
this.$router.push({name:'hi',params:{id:33}}})
// 帶查詢參數(shù)，變成 /courseSearch?plan=this.state4
this.$router.push({ name: 'hello',query:{keyword:this.state4}})
this.$router.push({ path: '/courseSearch',query:{keyword:this.state4}})
}
}
</script>
占位：
{
name: 'hi',
path: '/hello/:id',
component:HelloWorld,
},
{
name: 'hello',
path: '/hello2',
component:HelloWorld2,
},
取值：
<h1>{{$route.params.id}}</h1>
this.keyword= this.$route.query.keyword
axios傳遞參數(shù)
1.GET傳參
1.1.通過?傳參
axios.get('/toData?id=1')
.then(res=>{
console.log(res.data)
})
1.2.通過URL傳參
axios.get('/toData/1')
.then(res=>{
console.log(res.data)
})
1.3.通過參數(shù)傳參
axios.get('/toData',{params:{id:1}})
.then(res=>{
console.log(res.data)
})
axios({
url:'/toData'
type:'get'
params:{id:1}
}).then(function (res) {
console.log(res.data);
})
//直接接收或者拿map接收
public Result test(Integer id) {}
public Result test(@RequestParam Map<String, Object> map) {}
2.DELETE傳參同GET
3.POST傳參
3.1.默認(rèn)傳遞參數(shù)(傳遞的是json)
axios.post('/toData',{
uername:'sungan',
password:'P@ssw0rd'
})
.then(res=>{
console.log(res.data)
})
3.2.通過URLSearchParams傳遞參數(shù)(傳遞的是FormData)
以表單的形式傳遞參數(shù)，需要修改{headers:{‘Content-Type’:‘application/x-www-form-urlencoded’}}配置。
let myParams = new URLSearchParams()
myParams.append('jobNumber', '430525')
myParams.append(' password': '123')
axios.post(url,myParams, {headers: {'Content-Type':'application/x-www-form-urlencoded'}});
3.3.通過qs庫傳遞參數(shù)(傳遞的是FormData)
以表單的形式傳遞參數(shù)，需要修改{headers:{‘Content-Type’:‘application/x-www-form-urlencoded’}}配置。
//npm install qs / cnpm install qs (安裝了淘寶鏡像的才可以使用)
//qs.parse()是將URL解析成對象的形式
//qs.stringify()是將對象 序列化成URL的形式，以&進(jìn)行拼接
import qs from 'qs';
axios.post(url,qs.stringify({jobNumber: '430525', password: '123'}),
{headers: {'Content-Type':'application/x-www-form-urlencoded'}}
);
4.PUT傳參
4.1.默認(rèn)傳遞參數(shù)
axios.post('/toData/1',{
uername:'sungan',
password:'P@ssw0rd'
})
.then(res=>{
console.log(res.data)
})
請求頭和請求體中都攜帶值.
總結(jié)
到此這篇關(guān)于Vue與Axios傳參的文章就介紹到這了,更多相關(guān)Vue與Axios傳參內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue使用Font Awesome的方法步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
在vue.js渲染完界面之后如何再調(diào)用函數(shù)
這篇文章主要介紹了在vue.js渲染完界面之后如何再調(diào)用函數(shù)的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
flv.js是一個(gè)用于在瀏覽器中解碼和播放FLV視頻的JavaScript庫,它可以將FLV視頻流解碼并顯示在HTML5的video元素中,從而實(shí)現(xiàn)在瀏覽器中直接播放FLV格式的視頻文件,本文給大家介紹flv.js在vue中的使用,感興趣的朋友一起看看吧2023-11-11
Vue3中子組件改變父組件傳過來的值(props)的方法小結(jié)
在 Vue 3 中,子組件改變父組件傳過來的值（props）的方法主要有以下幾種：通過事件發(fā)射、使用 v-model、模擬 .sync 修飾符的功能（Vue 3 中已移除）,以及使用 ref 或 reactive,下面我將結(jié)合代碼示例和使用場景詳細(xì)講解這些方法,需要的朋友可以參考下2025-04-04
監(jiān)聽屬性可以針對某個(gè)屬性進(jìn)行監(jiān)聽,當(dāng)監(jiān)聽的屬性的值發(fā)生了變化,則會執(zhí)行相應(yīng)的函數(shù),下面這篇文章主要給大家介紹了關(guān)于Vue監(jiān)聽屬性的相關(guān)資料,需要的朋友可以參考下2021-11-11
這篇文章主要為大家詳細(xì)介紹了vue的ElementUI表格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
這篇文章主要介紹了vue中的keep-alive實(shí)例代碼，vue實(shí)現(xiàn)組件信息緩存的方法，在文中也給大家提到,需要的朋友可以參考下2018-07-07
這篇文章主要為大家介紹了Vue中$refs和$nextTick的使用方法，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)Vue有一定幫助，需要的可以參考一下2022-03-03
這篇文章主要介紹了Vue 請求傳公共參數(shù)的操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
小編給大家整理了關(guān)于vue移動(dòng)端日期選擇組件的知識點(diǎn)總結(jié)，希望能夠給讀者帶來幫助，一起學(xué)習(xí)參考下。2018-02-02