Vue element-plus 导航栏 [el-menu]

//全局导入整体布局
import Layout from ‘@/layout/Layout.vue’

const routes = [
{
path: ‘/test’,
component: () =>import(‘@/views/test/Test.vue’),
meta: {title: “测试页”}
},
{
path: ‘/login’,
component: () =>import(‘@/views/login/Login.vue’),
meta: {title: “测试页”}
},
{
path: ‘/layout’,
//layout是公用的，所有的都使用这个整体布局
component: () =>import(‘@/layout/Layout.vue’),
meta: {title: “整体布局”}
},
//写两个path不多于吗？因为两个path作用不一样，第一个path可以不写
//但是后面会有一个redirect的规则，斜杠/会自动跳转到->/home，不能更加细粒度进行控制
//这个是单独item的情况，
{
path: ‘/home’,
component: Layout, //整体布局，其实最后布局都是main和整体布局组合起来
children: [
{
path: ‘/home’,
name: ‘概要’, //这个是放在侧边栏的
icon: ‘odometer’,
meta: {title: ‘概要’},//浏览器的标题
component:() =>import(‘@/views/home/Home.vue’)//整体布局中main的视图
}
]
},
//sub menu的情况
{
path: ‘/workload’,
name: ‘工作负载’,
component: Layout, //整体布局
icon: ‘menu’,
children: [
{
path: ‘/workload/Deployment’,
name: ‘Deployment’, //这个是放在侧边栏的名字
meta: {title: ‘Deployment’},//浏览器的标题
component:() =>import(‘@/views/deployment/Deployment.vue’) //整体布局中main的视图
},
{
path: ‘/workload/Pod’,
name: ‘Pod’, //这个是放在侧边栏的名字
meta: {title: ‘Pod’},//浏览器的标题
component:() =>import(‘@/views/pod/Pod.vue’)
},

    ]
}

]

const router = createRouter({
history: createWebHistory(),
routes
})

NProgress.inc(100)
NProgress.configure({ easing: ‘ease’, speed: 200, showSpinner: false })

router.beforeEach((to, from, next) => {
// 启动进度条
NProgress.start()
// 设置头部
if (to.meta.title) {
document.title = to.meta.title
} else {
document.title = “k8s管理平台”
}
//放行
next()
})

router.afterEach(() => {
// 关闭进度条
NProgress.done()
})

// 抛出路由实例, 在 main.js 中引用
export default router

            <el-main  style="background-color:royalblue">
               <router-view></router-view>
            </el-main>

el-main里面就放入一行代码，这里面就放入router-view。


![](https://img-blog.csdnimg.cn/direct/00b763891c964b94b7aeb7d20f1b799a.png)


![](https://img-blog.csdnimg.cn/direct/cad688c77fb44593af301196dd40a963.png)


从App.vue进来有路由占位符，然后到了home这个地方，到了home这个pass。

```

home pass找到对应的router的配置

    {
        path: '/home',
        component: Layout, //整体布局，其实最后布局都是main和整体布局组合起来
        children: [
            {
                path: '/home',
                name: '概要', //这个是放在侧边栏的
                icon: 'odometer',
                meta: {title: '概要'},//浏览器的标题
                component:() =>import('@/views/home/Home.vue')//整体布局中main的视图
            }
        ]
    },

找到这个配置之后会去先加载整体布局。在整体布局里面又有main，在main的地方又有router-view，这里的router会被children子的视图加载进去，子视图被加载到了layout里面。layout又被加载到了App.vue里面。

                <el-main  style="background-color:royalblue">
                   <router-view></router-view>
                </el-main>

最后

推荐一些系统学习的途径和方法。

每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。

HTML 和 CSS：