您现在的位置是:网站首页> 编程资料编程资料
Vue与Axios的传参方式实例详解_vue.js_
2023-05-24
382人已围观
简介 Vue与Axios的传参方式实例详解_vue.js_
Vue的传参方式:
1.通过name来传递参数
在router下的index.js
{ path: '/hello', name: 'HelloWorld', component:HelloWorld, }, 在外部的对应的.vue中可以获取值
{{$route.name}}
2.通过路径的方式进行传参,需要在在路由配置中占位
2.1、通过v-bind:to的方式进行传参采取params:{key:value}(路径传参)
传值:
by ':to' way transfer parameters
占位:
{ name: 'hi', path: '/hello/:id', component:HelloWorld, }, 接收值:
{{$route.params.id}}
2.2、直接将参数写在路径上进行传参
传值:
by 'url' way transfer parameters by 'url' way transfer parameters
占位:
{ path:'/java/:id/:des', name:'java', component:Java } 接收值:
{{$route.params.id}}
{{$route.params.des}}
3.通过v-bind:to的方式进行传参采取query:{key:value}(问号传参)
传值:
by ':to' way transfer parameters by ':to' way transfer parameters by ':to' way transfer parameters by ':to' way transfer parameters
占位:问号传参不需要路由占位。
接收值:
{{$route.query.id}}
4.编程式导航,这是最常用的方式
传值:
占位:
{ name: 'hi', path: '/hello/:id', component:HelloWorld, }, { name: 'hello', path: '/hello2', component:HelloWorld2, }, 取值:
{{$route.params.id}}
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 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) }) 
请求头和请求体中都携带值.
总结
到此这篇关于Vue与Axios传参的文章就介绍到这了,更多相关Vue与Axios传参内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
您可能感兴趣的文章:
相关内容
- vue cli3 配置 stylus全局变量的使用方式_vue.js_
- Vue中的性能优化方案_vue.js_
- 微信小程序网络数据请求的实现详解_javascript技巧_
- vue中的stylus及stylus-loader版本问题_vue.js_
- node封装一个控制台进度条插件详情_node.js_
- element-ui中实现tree子节点部分选中时父节点也选中_vue.js_
- React Native 中限制导入某些组件和模块的方法_React_
- 微信小程序实现页面导航与传参功能详解_javascript技巧_
- vue.js数据响应式原理解析_vue.js_
- vue 部署上线清除浏览器缓存的方式_vue.js_
