vue-router路由動態傳參query和params的區別

轉載：https://www.cnblogs.com/listen9436/p/10651132.html

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}})


頁面url顯示結果是：http://localhost:8081/#/details?id=123

//接受參數 this.$route.query.id

一般來說，query要用path來引入，params要用name來引入。

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}})


頁面url顯示結果是：http://localhost:8081/#/details/123

//接受參數 this.$route.params.id

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

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

注意點:

query 刷新不會丟失 query里面的數據
params 刷新 會會 丟失 params里面的數據