vue-router中query和params

vue传参有两种方式：标签式和编程式

编程式传参有query和params两种，下面说说这两种方式如何实现传递参数，以及如何接收参数。

目录

1.query传参

2.params传参

---

1.query传参

//js路由文件路由写法

 {path:"recipe",component:Recipe},//用query传参不需要参数：rname

//a.vue文件传递参数rname

path是js文件中的path的值  query是要传递的参数    

methods:{

            search(){

                 let routeData = this.$router.resolve({path:'/recipe    ',query:{rname:this.value}});//path和query配合使用

                 window.open(routeData.href, '_blank');//新窗口打开

            }

此时新页面的url:    http://localhost:8080/#/recipe?rname=%E9%B1%BC

 //b.vue文件接收参数rname

 this.$route.query.rname    //用query获取

2.params传参

//js路由文件路由写法

 {path:"recipe/:rname",name:'Recipe',component:Recipe},//用params传参需要参数：rname 且要有name字段

//a.vue文件传递参数rname

path是js文件中的path的值  query是要传递的参数    

methods:{

            search(){

                 let routeData = this.$router.resolve({name:'Recipe ',params:{rname:this.value}});//params和name配合使用

                 window.open(routeData.href, '_blank');//新窗口打开

            }

此时新页面的url:   http://localhost:8080/#/recipe/%E8%B1%86%E8%85%90

 //b.vue文件接收参数rname

 this.$route.params.rname    //用params获取

 

                              附上一篇关于query和params的文章，值得参考~  https://www.jianshu.com/p/45ee7a6bdc0c

                               若您需要引用、转载，请注明来源及原文链接哦~   (*^▽^*)。