Vue 路由传值(传参)详解

总结一下Vue中的 路由传值 ，其中涉及了 axios 的使用方法
在使用的时候容易把这几种方法搞混

方式一

组件传值

对应的路由配置：

{
	 path: '/detail/:id',
	 name: 'Detail',
	 component: Detail
}
复制代码

注：必定要在路由后面加上/:id，id 只是一个参数名，无所谓，可是须要与传递和接收时的参数名保持一致

直接调用$router.push实现携带参数跳转

this.$router.push({ path:`/detail/${id}` })
复制代码

注：在跳转传参时，path后面是用两个反引号包起来的，而不是双引号或者单引号，而且是使用${}的形式把所须要的参数传过去

在子组件中进行接收

this.$route.params.id
复制代码

注：是route，而不是router

---

若是使用路由属性中的name来肯定匹配的路由进行传参的话，须要这样：

对应路由的配置：

{
    path: '/detail',
    name: 'Detail',
    component: Detail
}
复制代码

携带参数跳转：

this.$router.push({
  name: 'Detail',
  params: {
	id: id
  }
})
复制代码

注：这里不能使用/:id来传递参数了，由于父组件中，已经使用params来携带参数了。

子组件中接收参数：

this.$route.params.id
复制代码

再次强调，是route，不是router

用params传参，用name属性对应跳转路径，相似于post提交，参数不会出如今跳转路径里。

---

axios传值

当咱们须要把前端的数据带到后端接口时
也能够用这种方式进行传值

例如：

前端中调用后端接口的代码：

this.$axios.get(`http://127.0.0.1:3000/api/user/find/${id}`)
复制代码

在后端中进行接收：

router.get('/find/:id',(req,res)=>{
	//接收
	let id = req.params.id
})
复制代码

注意是get请求

这样的请求方式是会在地址栏中显示的
地址栏连接示例：http://127.0.0.1:3000/api/user/find/10

方式二

组件传值

对应的路由配置：

{
	 path: '/detail',
	 name: 'Detail',
	 component: Detail
}
复制代码

携带参数跳转：

this.$router.push({
	path:'/detail',
	query:{
		id:id
	}
})
复制代码

注：这里使用的是query

而后在子组件中进行接收：

this.$route.query.id
复制代码

注：传递时参数名必定要保持一致，接收时，不要用params了，要使用query进行接收

用query传参，用path属性对应跳转路径，相似于get提交，参数是在路径里显示的。

axios传值

若是要在axios中使用的话，能够这样：

例如：

前端调用后端接口代码：

this.$axios.get(`http://127.0.0.1:3000/api/user/delete?name=${name}&age=${age}`)
复制代码

其实这样是和上面再写一个query是同样的，不过这样更加简便

注：是用两个反引号包起来，后面使用的是 ? 号，而不是 /

使用这种方式的话，能够一次性在地址栏中传递多个值，中间用 & 符进行链接，是get请求

由于浏览器的地址栏有长度限制，因此若是参数过多时，不建议用这种方式

在后端中进行接收：

router.get('/delete'(req,res)=>{
	let name = req.query.name;
	let age = req.query.age;
})
复制代码

注：这里不要在/delete后面加东西了，接收的时候用query的方式进行接收

使用这样的方式进行传值，也是会在地址栏中显示的
地址栏连接示例：http://127.0.0.1:3000/api/user/delete?name=zhangsan&age=10

特别提醒

• 若是用params进行传参，必定要用name属性来对应跳转路径
• 若是用query进行传参，必定要用path属性来对应跳转路径

方式三

这里只说 axios传值

axios传值

当咱们调用后端接口要在数据库中插入数据的时候（添加数据），能够这样使用：

前端调用后端接口：

this.$axios.get(`http://127.0.0.1:3000/api/user/add`,{name=this.name,age=this.age`})
复制代码

等号后面的name和age是你从表单里获得的数据，而后保存到了data里面，而后从data里面拿出来

在后端进行接收：

router.post('/add',(req,res)=>{
	let name = req.body.name;
	let age = req.body.age;
})
复制代码

注：这里接收时用body进行接收，是post请求

通常咱们要向服务器提交数据的时候，都是使用的post请求，这种请求方式是安全的，使用这种方式的话，数据是不会在地址栏中显示的。

---

@_@