问题:在vue中this.$router.push怎么使用,query和params 有何区别?
程序员文章站
2022-03-29 09:14:26
...
遇到的问题:
在vue中this.$router.push怎么使用,query和params 有何区别?
解决办法:
query和params两者都是在Vue路由中传参。
用法: query用path来引入,params只能用name来传递,不能使用path。
注意:如果在params中,把name写成了path,接收参数页面会是undefined。
展示效果:query更像ajax中get请求(会在地址栏显示参数),而params更像post方式传递(不会在地址栏显示参数)
1.query传参
//传参
this.$router.push({
path:'/xxx',
query:{ id:id }
})
//接收参数
this.$route.query.id
2.params传参
//传参:
this.$router.push({
name:'xxx',
params:{ id:id}
})
//接收参数:
this.$route.params.id
传参是this.$router,接收参数是this.$route
$router为VueRouter实例。想要导航跳不同URL可以使用$this.router的方法(push、go、replace)去切换路由
$route是当前router跳转对象。里面可以获取name、path、query、params等相关信息。