vue router 如何使用params query傳參，以及有什麼區別

寫在前面：

傳參是前端常常須要用的一個操做，不少場景都會須要用到上個頁面的參數，本文將會詳細介紹vue router 是如何進行傳參的，以及一些小細節問題。有須要的朋友能夠作一下參考，喜歡的能夠點波贊，或者關注一下，但願能夠幫到你們。

本文首發於個人我的blog：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請求或者其餘操做就會失敗。

注意看上面的路由參數，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傳參有什麼區別：

一、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>複製代碼

二、params、query不設置也能夠傳參，可是params不設置的時候，刷新頁面或者返回參數會丟失，query並不會出現這種狀況，這一點的在上面說過了

後話：

本文到這裏就結束了，寫的很差的地方，請各位大佬們見諒。

最後：如需轉載，請放上原文連接並署名。碼字不易，感謝支持！本人寫文章本着交流記錄的心態，寫的很差之處，不撕逼，可是歡迎指點。而後就是但願看完的朋友點個喜歡，也能夠關注一下我。
blog網站 and 掘金我的主頁

以上2017.11.12