vue路由传参

2019-07-22  本文已影响0人  光头小青蛙

vue是一个单页面的开发框架,在开发的过程中,页面需要利用vue-router进行跳转,页面的跳转肯定会牵扯到页面之间的参数的传递,这就用到了路由传参,路由传参有两种方式,一种是params传参,一种是query传参。

使用params传参会有一个问题就是跳转到指定页面,初始参数是有的,当当前的页面刷新之后,参数就丢失了。所以在使用params传参的时候注意,通过name跳转指定页面,不能使用path,然后在路由设置里面,path设置要传的参数名:参数名,如果有多个参数,就直接写在后面就可以。
传参

  使用this.$router.push({name:"home",params:{id:"id"}

路由配置

{
path:"/home/:id"
}

然后就可以在页面里面拿到传递的参数,刷新也不会消失。

  created:{
  console.log(this.$route.params.id)
}

query传参会将参数拼接在导航栏路径的后面,query传参要是用path进行跳转。不需要再路由里配置。

this.$router.push({path:"/home",query:{id:"id"}})
created(){
console.log(this.$route.query.id)
}
上一篇 下一篇

猜你喜欢

热点阅读