vue中使用url傳參問題

vue Router中url傳參使用不同寫法的區別

1. JS傳參、接收參數的基本寫法 （注意 path、query配套/ name、params配套）

query傳參和接收參數：

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

params傳參和接收參數 (params只能通過name來引入路由，path會undefined || 如果提供了path，params會被忽略)

// 傳參(router)
this.$router.push({
   name: 'Detail',
   params: {
      id: id
   }  
})
// 接收參數 (route!!!!看清)
this.$route.params.id

Tips: 簡單說query相當於get請求，頁面跳轉的時候，可以在地址欄看到請求參數，瀏覽器刷新頁面不會消失，而params相當於post請求，參數不會在地址欄中顯示，瀏覽器刷新頁面后消失。

2.地址欄表現形式：

query: /login?id=10&name=xx

params: /login/10/xx

Tips: params這里的10和xx對應的是/:id/:name 這兩個參數可以不寫 那么就不會在地址欄上顯示 不過刷新頁面參數會消失 寫上參數刷新頁面 參數不會消失