文章目錄
- 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 {
)