VUE路由跳转传参的几种方式以及如何让接收参数
vue路由跳转携带参数时query和params的区别 注意:带参数传参的时候,当用params进行传参的时候只能由name引进路由;当使用query进行传参的时候,以path,name引入路由都是可以的
·
1.通过router-link的方法:
不带参数的情况:
<router-link :to="{name:'index'}">点击跳转到index页面</router-link>
<router-link :to="{path:'/index'}">点击跳转到index页面</router-link>
带参数的情况:
<router-link :to="{name:'index',params: {id:1}}">点击跳转到index页面</router-link>
<router-link :to="{name:'index',query: {id:1}}">点击跳转到index页面</router-link>
<router-link :to="{path:'/index',query: {id:1,name:'liming'}}">点击跳转到index页面</router-link>
在index页面中接受参数的方法:
html中
<div>{{$route.query.id}}</div>
<div>{{$route.params.id}}</div>
js中
this.$route.query.id
this.$route.params.id
2 this.$router.push() (函数里面调用)
不带参数的情况:
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
带参数的情况:
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({name:'home',params: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
如果需要传多个对象可以使用JSON.stringify()进行处理,在接收的时候使用JSON.parse()进行解析
注意:带参数传参的时候,当用params进行传参的时候只能由name引进路由;当使用query进行传参的时候,以path,name引入路由都是可以的。
在index页面中接受参数的方法同上。
更多推荐
已为社区贡献2条内容
所有评论(0)