vue学习之vue-router动态路由传参中params和query的区别

vue-router传递参数(params和query的区别)

query和params的区别

• 区别一：
  this.$router.push()方法中，params传值必须有name属性。
  this.$router.push() 方法中，query传值与name和path属性无必然联系，和其中哪个属性搭配都可以传值。
• 区别二：
  params传值在url上是看不到传递的参数的。
  query传值在url上能看到传递的参数，如：http://192.168.187.20:8080/#/dashboard/?data=hello
• 区别三(最重要的区别！！！)：
  通过query传值，跳到另一个页面的时候，刷新还是可以取到传递过来的值，而params就会重置，取不到值。

---

动态路由传参除了使用this.$router.push外，还可以使用<router-link>标签

params传参使用： 
方法1：<router-link :to="{ name: 'details', params: { id: 123 }}">点击按钮</router-link>
方法2：this.$router.push({name:'details',params:{id:123}})

query传参使用： 
方法1：<router-link :to="{ name: 'details', query: { id: 123 }}">点击按钮</router-link>
方法2：this.$router.push({name:'details',query:{id:123}})

方法3：<router-link :to="{ path: 'details', query: { id: 123 }}">点击按钮</router-link>
方法4：this.$router.push({path:'details',query:{id:123}})

---

• 要是想获取参数值：各自的获取方法是：
  query和params分别是：
  this.$route.query.id，this.$route.params.id