Vue与Axios传参
笋干zzZ~ 人气:4Vue的传参方式:
1.通过name来传递参数
在router下的index.js
{
path: '/hello',
name: 'HelloWorld',
component:HelloWorld,
},
在外部的对应的.vue中可以获取值
<h2>{{$route.name}}</h2>
2.通过路径的方式进行传参，需要在在路由配置中占位
2.1、通过v-bind:to的方式进行传参采取params:{key:value}(路径传参)
传值：
<!--用了params是不允许写path的，乌龟的屁股！-->
<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、直接将参数写在路径上进行传参
传值：
<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的方式进行传参采取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.编程式导航，这是最常用的方式
传值：
<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}}})
// 带查询参数，变成 /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传递参数
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.通过参数传参
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.默认传递参数(传递的是json)
axios.post('/toData',{
uername:'sungan',
password:'P@ssw0rd'
})
.then(res=>{
console.log(res.data)
})
3.2.通过URLSearchParams传递参数(传递的是FormData)
以表单的形式传递参数，需要修改{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库传递参数(传递的是FormData)
以表单的形式传递参数，需要修改{headers:{‘Content-Type’:‘application/x-www-form-urlencoded’}}配置。
//npm install qs / cnpm install qs (安装了淘宝镜像的才可以使用)
//qs.parse()是将URL解析成对象的形式
//qs.stringify()是将对象 序列化成URL的形式，以&进行拼接
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.默认传递参数
axios.post('/toData/1',{
uername:'sungan',
password:'P@ssw0rd'
})
.then(res=>{
console.log(res.data)
})
请求头和请求体中都携带值.
总结
加载全部内容