Vue与Axios如何实现复杂长尾参数传递的最佳实践是哪种方式？

本文共计1287个文字，预计阅读时间需要6分钟。

目录 + Vue的传参方式：

1.通过name传递递归参数

2.通过路径的方式传参，需要在路由配置中占位

2.1 通过v-bind:to的格式传参，获取params：{key:value}（路径传参） 2.2 直接将参数写在路径上

目录

• 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中可以获取值

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

请求头和请求体中都携带值.

总结

到此这篇关于Vue与Axios传参的文章就介绍到这了,更多相关Vue与Axios传参内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！