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

1、我在項目中想要點擊v-for的<li>，然后跳到下個頁面的表格，順帶將參數(shù)傳遞過去。如下圖：

這里實現(xiàn)的是第一個組件跳轉到第二個組件的時候將待辦任務的id傳遞過去，第二個組件接收id后提交給后臺請求列表的數(shù)據(jù)。實現(xiàn)如下：
第一個組件里：

<template><div class="template"><!--待辦任務--><ul><li v-for="(work_task,index) in tasks"><!--使用v-bind動態(tài)綁定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>

因為是根據(jù)每個li的不同id進行不同的傳參，所以需要使用v-bind動態(tài)綁定to，然后將要傳遞的work_task.id重新命名為id存入query中一起傳給目標組件里。
在目標組件里接收id，只需要在created()鉤子中接收即可，實現(xiàn)如下：

<script>export default {data() {return {}},created() {this.id = this.$route.query.id;//獲取上個頁面?zhèn)鬟f的id,在下面獲取數(shù)據(jù)的時候先提交id},} </script>

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

2、上面實現(xiàn)的是帶一個參數(shù)，重點代碼如下：

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

同理，也可實現(xiàn)攜帶多個參數(shù)，用逗號隔開即可，如下：

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

3、有時候，我們要傳遞一個數(shù)組，數(shù)組都是帶著多個參數(shù)的，我們可以使用上面的寫法，但是呢，當數(shù)組參數(shù)過多的時候，用上面的寫法會顯得太過于麻煩和累贅，就需要使用下面的方法。
比如用上面的例子，我不止傳work_task的id，我要傳整個work_task，里面就有id，title，schedulel等等許多參數(shù)，這時候的寫法如下：

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

上面整體寫法看起來是沒區(qū)別的，但本質就差很多了，實際傳的arry就是work_task這一整個數(shù)組的參數(shù)了，在下一個目標組件中接收基本也是一樣的寫法。

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

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

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

總結

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

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