VUE路由跳转传参的几种方式以及如何让接收参数

1.通过router-link的方法:

不带参数的情况:

点击跳转到index页面
点击跳转到index页面

带参数的情况:

点击跳转到index页面
点击跳转到index页面
点击跳转到index页面

在index页面中接受参数的方法:

html中

{{$route.query.id}}
{{$route.params.id}}

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页面中接受参数的方法同上。

你可能感兴趣的:(vue.js,javascript,html,前端,前端框架)