实现功能
跨页面传递特定标识参数(如 ID),实现在当前页面点击某一行数据后,跳转到另一个独立页面,展示该数据相关联的更多详细数据。
适用场景
例如:
- 电商应用
商品列表页到商品详情页:在商品列表页点击某个商品后,需要将商品的 ID 传递到商品详情页,以便详情页能够根据 ID 获取该商品的详细信息,如名称、价格、描述、图片等。
- 企业人员管理应用
员工列表页到员工详情页:在员工列表页面选择一个员工,将员工的编号或唯一标识传递到员工详情页,以展示该员工的详细档案信息,包括姓名、职位、入职时间、绩效评估等。
效果演示
250px|700px|reset

搭建步骤
核心步骤如下:
250px|700px|reset
以资产管理平台为例,演示搭建:
- 场景一:从资产明细表格跳转到资产详情页(表格组件)
- 场景二:从资产 SKU 列表跳转到资产详情页(列表组件)
场景一:表格组件
- 在资产明细页(一级页面)创建资产明细表格,可以使用「表格生成器」快速创建表格
250px|700px|reset

- 在资产详情页(二级页面)点击上方「设置」,自定义一个页面入参,例如 SKU_id
250px|700px|reset
- 在资产详情页配置一个「数据请求」,用于查询与入参相匹配的单行资产详情数据。在「查询记录」项使用 { { urlParams.value.页面入参 } } 消费跨页面传递的参数,实现精确查询关联数据。
250px|700px|reset

- 在资产详情页拖入一个详情组件,绑定上一步创建的数据请求,并设置需要展示的字段
250px|700px|reset
- 在资产明细页为表格配置交互事件:点击行时,在当前页签中打开应用页面「资产详情页」,页面入参为当前行数据的 id,即 { { item._id } }
250px|700px|reset

场景二:列表组件
资产详情页(二级页面)的设置跟场景一中的步骤 2、3、4 一致,此处不作赘述
- 在资产 SKU 页面(一级页面)创建 SKU 列表,拖入一个「列表」组件,使用列表生成器导入对象数据
250px|700px|reset
- 在资产 SKU 页面为列表配置交互事件:点击列表项时,在当前页签中打开应用页面「资产详情页」,页面入参当前列表项的 _id ,即 { { item._id } }
250px|700px|reset

FAQ
- urlParams 的作用是什么?
A:获取 url 参数
- 在详情页点击「数据请求」的测试后,发现没有数据该怎么办?
可以回到上级页面,点击设置了跳转的「表格行」或「列表项」,跳转到详情页后再编辑就有数据了
250px|700px|reset
