/data/:id這個路由匹配/data/1,/data/2這里的 id 叫 params
/data?id=1 /data?id=2 這里的 id 叫 query

當你使用params方法傳參的時候，要在路由后面加參數(shù)名，并且傳參的時候，參數(shù)名要跟路由后面設(shè)置的參數(shù)名對應(yīng)。使用query方法，就沒有這種限制，直接在跳轉(zhuǎn)里面用就可以。
這句話怎么理解呢？看下邊：
如果你要使用params傳參，那么你的路由頁面index.js必須帶上參數(shù)，如下

{
   path: '/detail/:id/',
   name: "detail",
   component: detail//這個details是傳進來的組件名稱
 }

使用： 
方法1：<router-link :to="{ name: 'details', params: { id: 123 }}">點擊按鈕</router-link>
方法2：this.$router.push({name:'details',params:{id:123}})
頁面url顯示結(jié)果是：http://localhost:8081/#/details/123

如果你要使用query傳參，那么你的路由頁面index.js必須帶上參數(shù)，如下

{
   path: '/detail',//這里不需要參入?yún)?shù)，參見上面的params寫法
   name: "detail",
   component: detail//這個details是傳進來的組件名稱
 }

使用： 
方法1：<router-link :to="{ name: 'details', query: { id: 123 }}">點擊按鈕</router-link>
方法2：this.$router.push({name:'details',query:{id:123}})

方法3：<router-link :to="{ path: 'details', query: { id: 123 }}">點擊按鈕</router-link>
方法4：this.$router.push({path:'details',query:{id:123}})
頁面url顯示結(jié)果是：http://localhost:8081/#/details?id=123

這里看方法3,4,其實是對應(yīng)方法1,2的，也就是說使用query方法，可以與path和name共用，2個都可以，但是params只能對應(yīng)name。

要是想獲取參數(shù)值：各自的獲取方法是：
query和params分別是：this.route.params.id

順便說一些參數(shù)是多個的情況
params傳參，如果路由index.js如下：

{
   path: '/detail/:id/:name',
   name: "detail",
   component: detail//這個details是傳進來的組件名稱
 }

那么跳轉(zhuǎn)寫法：this.$router.push({name:'detail',params:{id:123,name:'lisi'}})
效果：http://localhost:8081/#/details/123/lisi
query的寫法參考上面。

query跟params，前者在瀏覽器地址欄中顯示參數(shù)，后者則不顯示。