vue-router中query與params區別

query和params兩者都是在Vue路由中傳參。

用法： query用path來引入，params只能用name來傳遞，不能使用path 

展示效果：query更像ajax中get請求（會在地址欄顯示參數），而params更像post方式傳遞（不會在地址欄顯示參數）

 

query方式傳參和接收參數

//傳參
this.$router.push({
        path:'/xxx'
        query:{
          id:id
        }
 })
 //接收參數
this.$route.query.id

 

傳參是this.$router，接收參數是this.$route

$router為VueRouter實例。想要導航跳不同URL可以使用$this.router的方法（push、go、replace）去切換路由

$route是當前router跳轉對象。里面可以獲取name、path、query、params等相關信息

 

params方式傳參和接收參數

//傳參: 
this.$router.push({
        name:'xxx'
        params:{
          id:id
        }
      })
  
//接收參數:
this.$route.params.id

 

params傳參里面只能是name，不能是path

params只能用name來引入路由，如果這里寫成了path，接收參數頁面會是undefined