vue-router的query和params的區別

首先簡單來說明一下$router和$route的區別

• $router為VueRouter例項，想要導航到不同url，則使用$router.push方法
• $route為當前router跳轉物件，裡面可以獲取name、path、query、params等

params方式傳參和接收引數

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

query方式傳參和接收引數

不過query使用name來引入也可以傳參，使用path也可以

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

params方式和query方式的區別

• query方式生成的url為/xx?id=id，params方式生成的url為xx/id
• params方式需要注意的是需要定義路由資訊如：path: '/xx/:id',這樣才能進行攜帶引數跳轉，否則url不會進行變化，並且再次重新整理頁面後引數會讀取不到

選擇哪個更好

看場景需求，一般我開發喜歡使用params方式方式，因為path定義，會存在巢狀路由比較複雜且不好維護，而name比較簡潔而且更好維護。

原文地址：https://segmentfault.com/a/1190000017072101