vue 路由传参 params与query的区别

假设是从列表页带着参数id进入详情页，有两种传参方式：params 与 query

 

1. params

列表页 list.vue：

toDetail(id) {
  this.$router.push({
    name: 'detail',
    params: {
      id: id
    }
  })
},

详情页 detail.vue：

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

 

2. query

列表页 list.vue：

toDetail(id) {
  this.$router.push({
    path:'/detail',
    query: {
      id: id
    }
  })
},

详情页 detail.vue：

created() {
  console.log(this.$route.query.id);
},

 

两者的区别 

1. 引入路由：params要用name，query要用path

2. 接收参数：params是this.$route.params.id，query是this.$route.query.id

3. 地址展示：params不会在地址上出现参数，而query会在地址上出现参数，如下图：

    params：

    query：