vue-router中query和params
vue传参有两种方式:标签式和编程式编程式传参有query和params两种,下面说说这两种方式如何实现传递参数,以及如何接收参数。目录1.query传参2.params传参1.query传参//js路由文件路由写法 {path:"recipe",component:Recipe},//用query传参不需要参数:rname//a.vue文件传递参数rname...
vue传参有两种方式:标签式和编程式
编程式传参有query和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
若您需要引用、转载,请注明来源及原文链接哦~ (*^▽^*)。
更多推荐
所有评论(0)