【GO】k8s管理系统项目的前端部分16–前端布局详解

2.1 layout

src/layout/Layout.vue

2.2 路由

src/router/index.js

{
path: &＃39;/layout&＃39;,
component: () &＃61;> import(&＃39;&＃64;/layout/Layout.vue&＃39;),
icon: "odometer", //图标
meta: {title:"Layout", requireAuth: false}, //定义meta元数据
},


2.3 效果

达到了预期的效果

2.4 将home放到main

src/layout/Layout.vue

src/router/login.js

{
path: &＃39;/home&＃39;,
component: () &＃61;> import(&＃39;&＃64;/layout/Layout.vue&＃39;),
icon: "odometer",
meta: {title:"Layout", requireAuth: false},
children: [
{
path: &＃39;/home&＃39;, //视图
component: () &＃61;> import(&＃39;&＃64;/views/home/Home.vue&＃39;),
icon: "odometer", //图标
meta: {title:"概要", requireAuth: false}, //定义meta元数据
},
]
},


效果

3.1 Workload页面

3.1.1 创建目录和文件

创建src/workload目录

mkdir D:\golang\k8s-plantform-fe\src\views\workload
type nul > D:\golang\k8s-plantform-fe\src\views\workload\Deployment.vue
type nul > D:\golang\k8s-plantform-fe\src\views\workload\Pod.vue


src/views/workload/Deployment.vue

src/views/workload/Pod.vue

3.2 路由

src/router/index.js

{
path: &＃39;/workload&＃39;,
component: Layout,
icon: "menu", //图标
meta: {title:"工作负载", requireAuth: false},
children: [
{
path: &＃39;/workload/deployment&＃39;,
name: &＃39;Deployment&＃39;,
icon: "el-icons-s-data", //图标
meta: {title:"Deployment", requireAuth: true}, //定义meta元数据
component: () &＃61;> import(&＃39;&＃64;/views/workload/Deployment.vue&＃39;)
},
{
path: &＃39;/workload/pod&＃39;,
name: &＃39;Pod&＃39;,
icon: "el-icons-document-add", //图标
meta: {title:"Pod", requireAuth: true}, //定义meta元数据
component: () &＃61;> import(&＃39;&＃64;/views/workload/Pod.vue&＃39;)
},
]
},


3.3 效果