vue-router的query和params的區別

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比較簡潔而且更好維護。