Vue与Axios的传参方式实例详解

目录

  • Vue的传参方式:
    • 1.通过name来传递参数
    • 2.通过路径的方式进行传参,需要在在路由配置中占位
      • 2.1、通过v-bind:to的方式进行传参采取params:{key:value}(路径传参)
      • 2.2、直接将参数写在路径上进行传参
    • 3.通过v-bind:to的方式进行传参采取query:{key:value}(问号传参)
      • 4.编程式导航,这是最常用的方式
      • axios传递参数
        • 1.GET传参
          • 1.1.通过?传参
          • 1.2.通过URL传参
          • 1.3.通过参数传参
        • 2.DELETE传参同GET
          • 3.POST传参
            • 3.1.默认传递参数(传递的是json)
            • 3.2.通过URLSearchParams传递参数(传递的是FormData)
            • 3.3.通过qs库传递参数(传递的是FormData)
          • 4.PUT传参
            • 4.1.默认传递参数
        • 总结

          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 parametersby '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}(问号传参)
          【Vue与Axios的传参方式实例详解】传值:
          by ':to' way transfer parametersby ':to' way transfer parametersby ':to' way transfer parametersby ':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与Axios传参内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

            推荐阅读