vue 路由傳參 query 和 params 的區別

query使用 path 和 name 傳參跳轉都可以，而 params 只能使用 name 傳參跳轉。

• query傳參：

var router = new VueRouter({
   routes: [
     { path: '/login', component: login },
     { name:'register',path: '/register', component: register } 
   ]
})


// 注意：這是 query 兩種傳參方式 一種是直接跳轉把字符串傳過去 一種是傳描述目標位置的對象
<router-link to="/login?id=10&name=zs">登錄</router-link>
<router-link :to="{path:'/register',query:{id:5,name:'lili'}}">註冊</router-link>
或
<router-link :to="{name:'register',query:{id:5,name:'lili'}}">註冊</router-link>  
  
等同於：
this.$router.push('/login?id=10&name=zs')
this.$router.push({path:'/register',query:{id:5,name:'lili'}})
或
this.$router.push({name:'register',query:{id:5,name:'lili'}})

接收參數：this.content = this.$route.query;

注意接收參數的時候，已經是$route而不是$router了哦！！

• params傳參：

var router = new VueRouter({
  routes: [
    { path: '/login/:id/:name', component: login },// 這裏不傳入對應的參數（:/id/:name） 刷新頁面 參數會消失,頁面中就丟失了數據
    { name:'register', path: '/register', component: register }
  ]
})

// 注意：這是 params 兩種傳參方式 一種是直接跳轉把字符串傳過去 一種是傳描述目標位置的對象
<router-link to="/login/12/ls">登錄</router-link>
<router-link :to="{name:'register',params:{id:10,name:'lili'}}">註冊</router-link>

等同於：
this.$router.push('/login/12/ls')
this.$router.push({name:'register',params:{id:10,name:'lili'}})


接收參數：this.content = this.$route.params;

傳參跳轉頁面時，query 不需要再路由上配參數就能在新的頁面獲取到參數，params 也可以不用配，但是 params 不在路由配參數的話，當用戶刷新當前頁面的時候，參數就會消失。

也就是說使用params不在路由配參數跳轉，只有第一次進入頁面參數有效，刷新頁面參數就會消失。

---

效果的展示

query更加類似於我們ajax中get傳參，params則類似於post，說的再簡單一點，前者在瀏覽器地址欄中顯示參數，後者則不顯示

• query:
  
  
• params:
  
  
  注意：這裏的12和ls 對應的是/:id/:name 這兩個參數可以不寫 那麼就不會在地址欄上顯示 不過刷新頁面參數會消失 寫上參數刷新頁面 參數不會消失

參考地址：https://blog.csdn.net/alokka/article/details/84307161