vue路由传参

应用场景：首页(index)的分类水果，点击查看更多，需要展示此分类下的所有商品,跳转到list页面

 

实际操作：

1.在index页面中 查看更多  绑定跳转路径 :to  

 

 注意：1.写跳转路由的格式，类似于字符串拼接，需要带上id

2.在跳转路径上设置pk,比如下面这样，这样设置之后就可以传值了，而且前端也好接收

 

 3.然后在跳转之后的vue页面获取路由传递的参数，把这个参数保存起来放在data

 

 4.在data中设置分类id保存下面方便后面使用，设置生命周期函数，在页面加载时候就获取到传递过来的id

 

 6.然后我们就可以拿着这个分类id去查该分类下的所有商品

注意：是get请求，参数用params传递，传递获取到分类id到后端

 

 7. 分类id传到后端，用request.query_params.get来接收，根据分类id查出该分类下的所有商品，然后放到自定义的serializer进行序列化，最后APIResponse将查询到的数据返回前端

 

 8.自定义serializer

将需要返回给前端的字段放入fields中，并且这里要自定义图片地址，注意写的格式

 

 9.到此，该分类下的所有商品就全部传到前端了

后端传递过来的是一个列表，用一个参数接收(goods_list),需要使用的地方先for 循环取出 

 

 10.  for 循环取出需要数据