项目笔记26（尚品汇）

2022-04-22 194 阅读1分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第21天，点击查看活动详情

个人中心

个人中心静态组件

首先将之前准备好的个人中心组件放到项目中。接下来注册路由如下所示

在这里插入图片描述

页面效果如下所示

在这里插入图片描述

拆分组件

当用户点击我的订单与团购订单，右侧应该显示不同的内容，这就涉及到了二级路由。首先拆分组件。拆分出我的订单内容，与团购订单内容。拆分完成后注册二级路由信息

在这里插入图片描述

接下来绑定路由跳转

在这里插入图片描述

展示二级路由组件

在这里插入图片描述

此时用户点击我的订单与团购订单时，会展示不同界面。

在这里插入图片描述

我的订单组件修改

当前我的订单组件展示的数据都是死数据，我们应该动态替换死数据。首先书写接口

在这里插入图片描述

接下来获取数据

在这里插入图片描述

渲染页面

在这里插入图片描述

此时页面效果如下所示。

在这里插入图片描述