# vue router 如何使用params query傳參，以及有什么區別 ## 寫在前面： 傳參是前端經常需要用的一個操作，很多場景都會需要用到上個頁面的參數，本文將會詳細介紹vue router 是如何進行傳參的，以及一些小細節問題。有需要的朋友可以做一下參考，喜歡的可以點波贊，或者關注一下，希望可以幫到大家。 > 本文首發于個人blog：[OBKoro1's]([http://obkoro1.com/](http://obkoro1.com/)) ## Vue router如何傳參 ### params、query是什么？ params：/router1/:id ，/router1/123，/router1/789 ,**這里的id叫做params** query：/router1?id=123 ,/router1?id=456 ,這里的id叫做query。 ### 路由界面： router.js: 路由設置這里，**當你使用params方法傳參的時候，要在路由后面加參數名，**并且傳參的時候，參數名要跟路由后面設置的參數名對應。使用query方法，就沒有這種限制，直接在跳轉里面用就可以。  **注意：**如果路由上面不寫參數，也是可以傳過去的，但不會在url上面顯示出你的參數，并且當你跳到別的頁面或者刷新頁面的時候**參數會丟失**（如下圖所示），那依賴這個參數的http請求或者其他操作就會失敗。  步驟1、點擊跳轉  步驟2、刷新頁面  注意看上面的路由參數，id這個參數是我們有設置在路由上面的，id2我沒有設置在路由里面，所以刷新之后id2就不見了，在項目中，我們總不可能要求用戶不能刷新吧。 ### 組件1： ~~~ <template> <div class="app_page"> <h1>從這個路由傳參到別的路由</h1> <router-link :to="{ name:'router1',params: { id: status ,id2: status3},query: { queryId: status2 }}" > router-link跳轉router1 </router-link> </div> </template> <script> export default { name: 'app_page', data () { return { status:110, status2:120, status3:119 } }, } </script> ~~~ ### 編程式導航跳轉： 上面的router-link傳參，也可以使用[router文檔](https://link.juejin.im/?target=https%3A%2F%2Frouter.vuejs.org%2Fzh-cn%2Fessentials%2Fnavigation.html)里面的編程式導航來跳轉傳參。 ~~~ this.$router.push({ name:'router1',params: { id: status ,id2: status3},query: { queryId: status2 }}); //編程跳轉寫在一個函數里面，通過click等方法來觸發 ~~~ **這兩種傳參效果是一模一樣的，編程式導航，可以用來做判斷跳轉，比如是否授權，是否登錄，等等狀態**，對此不太了解的小伙伴們，可以跳過這個編程式導航，以后再來看。 ### 組件2： ~~~ <template> <div class="router1"> <h1>接收參數的路由</h1> <h1> params.id：{{ $route.params }}</h1> <h1>query.status:{{ $route.query.queryId }}</h1> <keep-alive> <router-view></router-view> </keep-alive> </div> </template> ~~~ 傳參還是比較簡單的，按著上面組件的使用方法就可以成功傳過去了。 **提示：**獲取路由上面的參數，用的是$route，后面沒有r。 ### params傳參和query傳參有什么區別：  1、params是路由的一部分,必須要有。query是拼接在url后面的參數，沒有也沒關系。 **params一旦設置在路由，params就是路由的一部分**，如果這個路由有params傳參，但是在跳轉的時候沒有傳這個參數，會導致跳轉失敗或者頁面會沒有內容。 比如：跳轉/router1/:id ~~~ <router-link :to="{ name:'router1',params: { id: status}}" >正確</router-link> <router-link :to="{ name:'router1',params: { id2: status}}">錯誤</router-link> ~~~ 2、params、query不設置也可以傳參，但是params不設置的時候，刷新頁面或者返回參數會丟失，query并不會出現這種情況，這一點的在上面說過了 ## **后話：** 本文到這里就結束了，寫的不好的地方，請各位大佬們見諒。