vue-router query和params方式传递参数和接收参数

query方式传参和接收参数

[相当于get请求，页面跳转的时候，可以在地址栏看到请求参数]
传参（把键值路由出去）：

this.$router.push({
        path:'/XXX',                  
        query:{
          键名  : 值,
        }
      })

接收参数（跳转的另一页面接收值）：

新键名（自定义）: this.$route.query.键名,

params方式传参和接收参数

[相当于post请求，参数不会再地址栏中显示]
传参:

this.$router.push({
        name:'xxx'
        params:{
          id:id
        }
      })

接收参数:

this.$route.params.id

注意的是：

1. query传参，push里面是 path:’/xxxx’, (传送地址值)
2. params传参，push里面只能是 name:‘xxxx’,
3. 传参是$router，接收参数是 $route 

---

this.$router 和 this. $route有何区别

1.$ router为VueRouter实例，想要导航到不同URL，则使用$router.push方法
2. $ route为当前router跳转对象，里面可以获取name、path、query、params等

参考：https://www.cnblogs.com/zhangruiqi/p/9412539.html