寫在前面：

傳參是前端經常需要用的一個操作，很多場景都會需要用到上個頁面的參數，本文將會詳細介紹vue router 是如何進行傳參的，以及一些小細節問題。有需要的朋友可以做一下參考，喜歡的可以點波贊，或者關注一下，希望可以幫到大家。

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請求或者其他操作就會失敗。

注意看上面的路由參數，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文檔里面的編程式導航來跳轉傳參。

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并不會出現這種情況，這一點的在上面說過了

作者原話：首先我針對刷新參數消失想到的方法是在剛開始的時候將參數存到localStorage里面，但是如果這種傳參比較多的話可能存儲的地方會有點多；

然后再看一些博客的時候提到用vue 的<keep-alive>，即在<router-view>外套一層<keep-alive>實現頁面緩存，但是這樣確實是不是每一個頁面都需要緩存的特別是一些狀態之間切換需要流程化更改狀態的頁面，寫上這個就不能實現數據的實時刷新了

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。