这篇文章给大家分享的是有关vuejs框架路由如何传值的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
创新互联主要从事网页设计、PC网站建设(电脑版网站建设)、wap网站建设(手机版网站建设)、响应式网站设计、程序开发、网站优化、微网站、小程序制作等,凭借多年来在互联网的打拼,我们在互联网网站建设行业积累了丰富的成都做网站、网站设计、网站设计、网络营销经验,集策划、开发、设计、营销、管理等多方位专业化运作于一体。
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
提交,参数不会出现在跳转路径里。
当我们需要把前端的数据带到后端接口时
也可以用这种方式进行传值
例如:
前端中调用后端接口的代码:
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中使用的话,可以这样:
例如:
前端调用后端接口代码:
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传值
当我们调用后端接口要在数据库中插入数据的时候(添加数据),可以这样使用:
前端调用后端接口:
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
请求,这种请求方式是安全的,使用这种方式的话,数据是不会在地址栏中显示的。
感谢各位的阅读!关于“vuejs框架路由如何传值”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
当前名称:vuejs框架路由如何传值
分享网址:https://www.cdcxhl.com/article48/jcihep.html
成都网站建设公司_创新互联,为您提供服务器托管、网页设计公司、微信小程序、关键词优化、移动网站建设、品牌网站设计
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联