vue3.0+element Plus实现页面布局，侧边栏菜单路由跳转

一. 先在router.js文件中配置路由，将侧边栏中需要跳转的页面都添加到children中

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/project",
      name: "projectGroup",
      meta: {
        requiresAuth: true,
        title: "项目列表",
        navBreadcrumb: [
          { label: "项目列表", name: "projectSample", link: true },
        ],
      },
      component: () => import("../views/project/Index.vue"),
      children: [
        {
          path: "sample/:id",
          name: "projectGroup:sample",
          meta: {
            requiresAuth: true,
            title: "项目列表",
            navBreadcrumb: [
              { label: "项目列表", name: "projectSample", link: true },
            ],
          },
          component: () => import("../views/project/Sample.vue"),
        },
        {
          path: "alg/:id",
          name: "projectGroup:alg",
          meta: {
            requiresAuth: true,
            title: "项目列表",
            navBreadcrumb: [
              { label: "项目列表", name: "projectSample", link: true },
            ],
          },
          component: () => import("../views/project/Alg.vue"),
        },
      ],
    },
  ],
});

二. 在view目录下新建一个文件，里面包含侧边栏要跳转的页面

三.  页面样式布局

1. 我选择使用自定义组件BaseLayout.vue文件来设置header和aside样式显示

也可以使用element plus中的Container 布局容器 

 2. BaseHeader.vue文件里面为页面头部样式，头部样式相对简单

3. BaseSide.vue文件里面是侧边栏样式，这里是重点！！！这里进行页面路由跳转设置

四. index.vue文件中引入刚才的组件

样式如下：