vuejs框架路由传值的方法：1、直接调用“$router.push(…)”语句实现携带参数进行跳转传值；2、利用axios传值，可调用“this.$axios.get(…)”语句来传值。
本教程操作环境：windows7系统、vue2.9.6版，DELL G3电脑。
总结一下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请求，这种请求方式是安全的，使用这种方式的话，数据是不会在地址栏中显示的。
相关推荐：《vue.js教程》
以上就是vuejs框架路由的怎么传值的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2946690.html
