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

OBKoro1發表於2017-11-13
Vue

寫在前面：

傳參是前端經常需要用的一個操作，很多場景都會需要用到上個頁面的引數，本文將會詳細介紹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傳參有什麼區別：

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

後話：

本文到這裡就結束了，寫的不好的地方，請各位大佬們見諒。

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

以上2017.11.12

相關文章