[JavaScript知识库]Vue和axios的传参方式

Vue和axios的传参方式：

Vue的传参方式:

1.通过name来传递参数

在router下的index.js

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

在外部的对应的.vue中可以获取值

<h2>{{$route.name}}</h2>

2.通过v-bind:to的方式进行传参 name绑定跳转页面的名称 ，采取params:{key:value}

传值：

<router-link :to="{name:'hi',params:{id:33}}">by ':to' way transfer parameters</router-link>

接收值：

<h2>{{$route.params.id}}</h2>

3.通过url的方式进行传参

传值

<router-link to="/java/1/天下第一">by 'url' way transfer parameters</router-link>

在router下的index.js中

{
      path:'/java/:id/:des',
      name:'java',
      component:Java
    }

接收值:

<h2>{{$route.params.id}}</h2>
 <h2>{{$route.params.des}}</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:'lol',params:{id:1}})
          }
      }
</script>

取值

<h1>{{$route.params.id}}</h1>

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.通过URL传参

axios.get('/toData',{params:{id:1}})
.then(res=>{
	console.log(res.data)
})

2.DELETE传参同GET

3.POST传参

3.1.默认传递参数

axios.post('/toData',{
	uername:'sungan',
	password:'P@ssw0rd'
})
.then(res=>{
	console.log(res.data)
})

3.2.通过URLSearchParams传递参数

	const params=new URLSearchParams();
	params.append('k1','v1');
	params.append('k2','v2');
	axios.post('/todata',params)
	.then(res=>{
		console.log(res.data)
	})

4.PUT传参

4.1.默认传递参数

axios.post('/toData/1',{
	uername:'sungan',
	password:'P@ssw0rd'
})
.then(res=>{
	console.log(res.data)
})

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