在vue項目中，往往會遇到這樣的情況，就是要實現在一個循環列表中，點擊其中一條跳轉到下個頁面，然后將這一條的相關數據帶到下個頁面中顯示，這是個循環列表，無論點哪一條都是跳到相同的頁面，只是填的數據不一樣，這個時候就需要實現跳轉的時候一起把參數攜帶過去。

1、我在項目中想要點擊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，進行相應操作了。

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

<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>

3、有時候，我們要傳遞一個數組，數組都是帶著多個參數的，我們可以使用上面的寫法，但是呢，當數組參數過多的時候，用上面的寫法會顯得太過于麻煩和累贅，就需要使用下面的方法。
比如用上面的例子，我不止傳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中定義的workTaskthis.workTask = this.$route.query.arry;},} </script>

這樣就接收完畢，就可以在這個頁面使用workTask數組里面的參數了。

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

總結

以上是生活随笔為你收集整理的【vue-router①】router-link跳转页面传递参数 - 进击的前端之路（偶尔爬坑java小路） - SegmentFault 思否的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。