老师能在捋一下路由动态改变数据的整个过程嘛 有点乱

来源:4-3 使用动态路由获取不同列表内容(3)

咸鱼王派大星

2021-07-31 09:03:28

是不是先是在公共组件给每个列表添加<Link>标签让其能改变访问地址,然后在src目录下的index.js里面路由自动匹配到符合条件的地址来渲染对应的页面,并且附带把id传过去,然后在List里面接受id再通过id发送axios请求来渲染List页面 来达到整个效果

写回答

1回答

好帮手慕言

2021-07-31

同学你好,整体理解的是可以的,可以参考下方:

头部header的每一项,都被link标签包裹:

http://img.mukewang.com/climg/6104dd66095a2bdc05500270.jpg

link标签,就可以更改当前页面的路由,路由上会携带列表的id:

http://img.mukewang.com/climg/6104dd8a097e1cd207040183.jpg

http://img.mukewang.com/climg/6104dd9c095d734705680271.jpg

http://img.mukewang.com/climg/6104ddae09cf591805450163.jpg

http://img.mukewang.com/climg/6104de450965f15208650145.jpg

而路由改变后,就会触发路由对应的页面List的生命周期函数componentWillReceiveProps,在该方法中,可以获取到列表的id(路由上的参数id):

http://img.mukewang.com/climg/6104de75096cc28607480209.jpg

然后利用该id请求数据,并渲染列表,这样就实现了动态更新列表:

http://img.mukewang.com/climg/6104de8809c62f1207900300.jpg

祝学习愉快~

0

0 学习 · 15276 问题

查看课程