vue-router页面跳转的传值和取值

1.通过router-link进行跳转

路由配置：
 {
   path:'/home',
   name:'name',
   component:'name'
 }

用query传参:
<router-link :to="{path:'/home',query:{key:'hello',id:1}}"></router-link>
url地址: .../home?key=hello&id=1
取值: console.log(this.$route.query.key)// hello
用params传参:
<router-link :to="{name:'home',params:{key:'hello',id:1}}"></router-link>
url地址: .../home
取值: console.log(this.$route.params.key)// hello

2.this.$router.push()

<button @click="to()"></button>
用query传参时路由需要用path引入
methods:{
  to() {
   this.$router.push({
     path:'/home',
     query:{value:'hello',id:1}
 })
},
url地址: .../home?key=hello&id=1
取值: console.log(this.$route.query.value)// hello
用params传参路由用name引入
  getto(){
  this.$router.push({
     name:'home',
     params:{value:'hello',id:1}
 })
}
url地址: .../home
取值: console.log(this.$route.params.value)// hello
}

用query传参的时候，参数会显示在url地址上，二通过params传参，参数不会显示在url地址上