15

在vue项目中,往往会遇到这样的情况,就是要实现在一个循环列表中,点击其中一条跳转到下个页面,然后将这一条的相关数据带到下个页面中显示,这是个循环列表,无论点哪一条都是跳到相同的页面,只是填的数据不一样,这个时候就需要实现跳转的时候一起把参数携带过去。

1、我在项目中想要点击v-for的<li>,然后跳到下个页面的表格,顺带将参数传递过去。如下图:

clipboard.png

这里实现的是第一个组件跳转到第二个组件的时候将待办任务的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中定义的workTask
      this.workTask = this.$route.query.arry;
    },
  }
</script>

这样就接收完毕,就可以在这个页面使用workTask数组里面的参数了。

觉得有帮助的朋友们请赏赐在下一个赞!!!


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

pengliheng · 2018年04月23日

data-json="{"id":66143,"goods_image":"http://dummyimage.com/500x500/79f2b2&text=法赛特商品列表","goods_image_list":["http://dummyimage.com/500x500/#f28f79&text=fst list","http://dummyimage.com/500x500/#7986f2&text=fst list","http://dummyimage.com/500x500/#a9f279&text=fst list","http://dummyimage.com/500x500/#f279cc&text=fst list"],"new_price":0,"goods_name":"法塞特2011霜后赤霞珠干红葡萄酒 750ml","goods_code":10003091,"goods_short_name":"","brand_id":21,"brand_name":"法塞特","td_code":"6959901513246","bar_code":"","standard_id":0,"standard_name":"750ml","produce_area_id":0,"produce_area_name":"","model_id":0,"model_name":"","summary":"","unit_id":48,"unit_name":"瓶","assist_unit_enable":"0","assist_unit_id":0,"assist_unit_name":"","assist_unit_conversion":"0","retail_price":980,"prime_cost":233,"primary_dealer_price":0,"second_dealer_price":0,"third_dealer_price":0,"produce_cost":0,"validity_days":"","remarks":"","corp_id":"","detail":"<p><img src="http://www.farsightwine.com/u..." alt=""/><img src="http://shanghai.farsightwine...."/><img src="http://www.farsightwine.com/u..." alt=""/><img src="http://www.farsightwine.com/u..." alt=""/><img src="http://www.farsightwine.com/u..." alt=""/><img src="http://www.farsightwine.com/u..." alt=""/></p>","corp_code":"001001","corp_name":"法塞特","del_flag":"0","create_date":"","create_user_id":"","create_user_name":"","goods_status":"A0","goods_type_id":338,"goods_type_name":"法塞特","is_score":"","score_num":0,"is_discount":"","discount_reat":"","ticket_price":0,"goods_attribute":"","goods_factory":"","supplier_id":"","dept_id":"2809c42fa79c4345b56f9e1f6adfe72d","dept_code":"001001013","dept_name":"技术支持部","shop_relation_id":"","breed_id":0,"breed_name":"","grade_id":0,"grade_name":"","mold_id":0,"mold_name":"","full_path_name":"","discount":0,"price_type":"折扣定价","goods_color":"","new_retail_price":0,"low_price":0,"new_low_price":0,"set_price_date":"","retail_price_range":"","low_price_range":"","is_dj":""}"

那如果我要传的是上面这个这么大的json对象呢??会超出url最大长度吧,那么应该如何传递比较合适

回复

0

router-link是页面跳转间的传递值,建议只传几个关键的参数,比如id,跳转到目标页面的时候再根据关键参数请求后台获取详细的数据,若是json格式是要传递后台用的,就无需经过router-link,post请求接口的时候直接按接口标准传json就行了

我是帅帅的玉米 作者 · 8月19日
云云云云彩 · 2018年11月19日

你好,点击只能获取的第一次点击获得的参数是怎么回事呢?

回复

vbyzc · 7月30日

白痴人发白痴 贴子,query后面少个问号,都不知现在的人搞什么,自己连代码都不能运行,就贴上来!?

回复

0

代码是公司项目,要贴出来肯定是要经过整理的,手动整理出来的代码难免会有一些手误,我谢谢你的指正,但是不知道你这么恶意骂人是意欲何为,况且少的是冒号,问号又是哪个旮旯角落冒出来的

我是帅帅的玉米 作者 · 8月19日
载入中...