在vue專案中，往往會遇到這樣的情況，就是要實現在一文章列表中，點選其中一條跳轉到下個頁面，然後將這一條的相關資料帶到下個頁面中顯示，無論點哪一條都是跳到相同的頁面結構（下一個頁面的頁面使用的元件是一樣的），只是填的資料不一樣，這個時候就需要實現跳轉的時候一起把引數攜帶過去。

<template>
  <div class="template">
    <!--點選文章列表跳轉到相應的文章頁面-->
    <ul>
      <li v-for="(article_task,index) in tasks">
      <!--使用v-bind動態繫結id傳遞給目標路徑-->
      <!--注意： 這裡攜帶了了article_task的一個引數id-->
        <router-link tag="a" :to="{path:'/articleTask',query{id:article_task.id}}">
          <div class="article-render">
            <span>{{index+1}}.</span>
            <span>{{article_task.title}}</span>
            <span>
              {{article_task.content}}%
            </span>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>
 

但是：上面的的router-link傳遞一個一個引數id，當我們需要傳遞多個引數的時候應該怎麼辦呢，很簡單，只需要將query的引數用逗號隔開就好了

<router-link tag="a" 
    :to="{
        path:'/articleTask',
        query{id:article_task.id,title:article_task.title,content:article_task.content}}">
</router-link>

但是問題，又來了。。。。。程式碼這樣寫賊雞兒多，萬一寫錯一個那我豈不是文章不現實了，所以還有一個更簡單的辦法

<router-link tag="a" :to="{path:'/articleTask',query{arry:article_task}}"></router-link>

傳遞引數可以，怎麼接收引數呢？在目標元件裡接收引數，只需要在created()鉤子中接收即可，實現如下：

<script>
  export default {
    data() {
      return {
      }
    },
    created() {

    //獲取引數的時候  是 this.$route ! route !！  route ！！！

    //單個引數傳遞的時候
      this.id = this.$route.query.id;//獲取上個頁面傳遞的id,在下面獲取資料的時候先提交id

    //這邊接收上個元件傳遞過來的arry陣列，賦值給data中定義的articleTask
      this.articleTask = this.$route.query.arry;
    },
  }
</script>