文章目录
- 1 子路由的实现
-
- 1.1 router/index.js
- 1.2 views/Home.vue(首页)
- 1.3 Main.vue
- 2 左上方的卡片
-
- 2.1 分栏间隔(Layout布局)
- 2.2 卡片容器(el-card)
- 2.3 整体代码Home.vue
- 3 左下方的table(静态实现)
-
- 3.1 准备数据
- 3.2 渲染表格(el-table)
- 3.3 整体代码Home.vue
- 4 附录
子路由，先找父路由，然后在父组件中渲染RouterView代表的区域。将信息聚合在卡片容器中展示，卡片容器el-card和表格el-table的使用。
1 子路由的实现
在Vue应用中，尤其是使用Vue Router时，子路由(Child Routes)是构建复杂单页应用(SPA)布局的一个重要特性。
通过子路由，可以实现页面的嵌套布局，例如在一个主界面中包含多个视图或组件。
嵌套路由的应用场景:
(1)管理后台系统：左侧菜单为父级路由，右侧内容区域根据点击的菜单项加载不同的子路由页面。
(2)电商网站的产品详情页：顶部展示产品图片和基本信息，下方通过子路由切换不同标签(如规格、评价、推荐等)。
(1)主要内容区的显示内容，需要随着菜单进行切换，通过子路由的方式渲染。
(2)RouterView是Vue Router中的一个关键组件，用于在路由切换时渲染匹配的组件。
它是实现单页应用(SPA)页面导航和内容切换的基础。
1.1 router/index.js
import {
)