欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue與Axios的傳參方式實(shí)例詳解

 更新時(shí)間：2022年08月02日 09:39:52   作者：筍干zzZ~  
現(xiàn)在vue項(xiàng)目基本上都是使用axios進(jìn)行請(qǐng)求操作,下面這篇文章主要給大家介紹了關(guān)于Vue與Axios的傳參方式的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

Vue的傳參方式:

1.通過name來傳遞參數(shù)

在router下的index.js

{
	path: '/hello',
	name: 'HelloWorld',
	component:HelloWorld,
},

在外部的對(duì)應(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}(問號(hào)傳參)

傳值：

<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>

占位：?jiǎn)柼?hào)傳參不需要路由占位。

接收值：

<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庫(kù)傳遞參數(shù)(傳遞的是FormData)

以表單的形式傳遞參數(shù)，需要修改{headers:{‘Content-Type’:‘application/x-www-form-urlencoded’}}配置。

//npm install qs / cnpm install qs (安裝了淘寶鏡像的才可以使用)
//qs.parse()是將URL解析成對(duì)象的形式
//qs.stringify()是將對(duì)象 序列化成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)
})

請(qǐng)求頭和請(qǐng)求體中都攜帶值.

總結(jié)

到此這篇關(guān)于Vue與Axios傳參的文章就介紹到這了,更多相關(guān)Vue與Axios傳參內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論