vue-router路由動态傳參query和params的差別

1.query方式傳參和接收參數

//路由

{
   path: '/detail',   //這裡不需要參入參數
   name: "detail",
   component: detail//這個details是傳進來的元件名稱
 }


//使用： 
//方法1：
<router-link :to="{ name: 'details', query: { id: 123 }}">
點選按鈕
</router-link>

//方法2：
<router-link :to="{ path: 'details', query: { id: 123 }}">
點選按鈕
</router-link>

//方法3：
this.$router.push({name:'details',query:{id:123}})

//方法4：
this.$router.push({path:'details',query:{id:123}})
           

頁 面 u r l 顯 示 結 果 是 \color{red}{頁面url顯示結果是} 頁面url顯示結果是：

http://localhost:8081/#/details?id=123

接 受 參 數 \color{red}{接受參數 } 接受參數 :

this.$route.query.id

2.params方式傳參和接收參數

//路由
{
   path: '/detail/:id/',    //後面要帶參數!!!!!!
   name: "detail",
   component: detail 
 }

//使用： 
//方法1：
<router-link :to="{ name: 'details', params: { id: 123 }}">
點選按鈕
</router-link>

//方法2：
this.$router.push({name:'details',params:{id:123}})
           

頁 面 u r l 顯 示 結 果 是 \color{red}{頁面url顯示結果是 } 頁面url顯示結果是：

http://localhost:8081/#/details/123

接 受 參 數 \color{red}{接受參數 } 接受參數 :

this.$route.params.id

總 結：

直白的來說 query相當于get請求，頁面跳轉的時候，可以在位址欄看到請求參數；

而 params相當于post請求，參數不會再位址欄中顯示