【vue-router①】router-link跳轉頁面傳遞參數

在vue項目中，每每會遇到這樣的狀況，就是要實如今一個循環列表中，點擊其中一條跳轉到下個頁面，而後將這一條的相關數據帶到下個頁面中顯示，這是個循環列表，不管點哪一條都是跳到相同的頁面，只是填的數據不同，這個時候就須要實現跳轉的時候一塊兒把參數攜帶過去。

一、我在項目中想要點擊v-for的<li>，而後跳到下個頁面的表格，順帶將參數傳遞過去。以下圖：

這裏實現的是第一個組件跳轉到第二個組件的時候將待辦任務的id傳遞過去，第二個組件接收id後提交給後臺請求列表的數據。實現以下：
第一個組件裏：

<template>
  <div class="template">
    <!--待辦任務-->
    <ul>
      <li v-for="(work_task,index) in tasks">
      <!--使用v-bind動態綁定id傳遞給目標路徑-->
        <router-link tag="a" :to="{path:'/workTaskEdit',query:{id:work_task.id}}">
          <div class="mui-navigate-right">
            <span>{{index+1}}.</span>
            <span>{{work_task.title}}</span>
            <span>
              {{work_task.schedulel}}%
            </span>
          </div>
        </router-link>
      </li>
    </ul>
    
  </div>
</template>

由於是根據每一個li的不一樣id進行不一樣的傳參，因此須要使用v-bind動態綁定to，而後將要傳遞的work_task.id從新命名爲id存入query中一塊兒傳給目標組件裏。
在目標組件裏接收id，只須要在created()鉤子中接收便可，實現以下：

<script>
  export default {
    data() {
      return {
      }
    },
    created() {
      this.id = this.$route.query.id;//獲取上個頁面傳遞的id,在下面獲取數據的時候先提交id
    },
  }
</script>

這樣就能接收id，進行相應操做了。

二、上面實現的是帶一個參數，重點代碼以下：

<router-link tag="a" :to="{path:'/目標路徑',query:{id:work_task.id}}"></router-link>

同理，也可實現攜帶多個參數，用逗號隔開便可，以下：

<router-link tag="a" :to="{path:'/目標路徑',query:{param1:當前param1,
                                                param2:當前param2,
                                                param3:當前param3,
                                                ...}
                          }">
</router-link>

三、有時候，咱們要傳遞一個數組，數組都是帶着多個參數的，咱們可使用上面的寫法，可是呢，當數組參數過多的時候，用上面的寫法會顯得太過於麻煩和累贅，就須要使用下面的方法。
好比用上面的例子，我不止傳work_task的id，我要傳整個work_task，裏面就有id，title，schedulel等等許多參數，這時候的寫法以下：

<router-link tag="a" :to="{path:'/目標路徑',query:{arry:work_task}}"></router-link>

上面總體寫法看起來是沒區別的，但本質就差不少了，實際傳的arry就是work_task這一整個數組的參數了，在下一個目標組件中接收基本也是同樣的寫法。

<script>
  export default {
    data() {
      return {
          workTask:[],
      }
    },
    created() {
    //這邊接收上個組件傳遞過來的arry數組，賦值給data中定義的workTask
      this.workTask = this.$route.query.arry;
    },
  }
</script>

這樣就接收完畢，就能夠在這個頁面使用workTask數組裏面的參數了。

以爲有幫助的朋友們請賞賜在下一個贊！！！