【vue3】关于从0开始自己尝试layout布局的记录

首先先展示最后页面效果

关于layout布局首先分为四个部分，其中最主要为侧边菜单栏

1. 先展示关于是路由相关参数
   router底下的index.js文件

import Home from '../views/Home.vue'
import Login from '../views/Login.vue'
import AppLayout from "@/Layout/AppLayout";
const routes = [
//hidden:是否隐藏菜单栏，true则不在菜单栏进行展示，默认展示

    {path: "/", redirect: "/login", hidden: true},
    {
        path: '/login',
        name: 'Login',
        component: Login,
        hidden: true
    },
    {
        path: '/One',
        // redirect: '/One/home',
        component: AppLayout,
        meta: {
            icon: "el-icon-mouse",
            name: '肆貓鸭第一弹'
        },
        // name: 'Home',
        children: [
            {
                path: 'home',
                name: 'Home',
                component: Home,
                meta: {
                    needLogin: true,
                    icon: 'el-icon-data-line',
                    name: '个人资料'
                }
            }
         ]
      }
 ]

2. 然后就是layout布局，这里使用element的ui
   首先在src下建立layout文件夹，在layout文件夹下建一个叫AppLayout的vue文件，样式可以自己修改，代码如下：

<template>
  <div class="common-layout">
    <el-container>
      <el-header>simaoya`s vue3</el-header>
      <el-container>
        <el-aside width="200px">
          <Menu></Menu>
        </el-aside>
        <el-container>
          <el-main>
            <router-view></router-view>
          </el-main>
          <el-footer>
            <li>
              {{ appInfo.author + '#' + appInfo.version }}
            </li>
            <li>
              {{ appInfo.copyright + appInfo.copyrightYear }}
            </li>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Menu from "@/Layout/compontents/Menu";

export default {
  name: "AppLayout",
  components: {Menu},

}
</script>
<script setup>

import {useStore} from "vuex";

const state = useStore().state
let appInfo = state.appInfo
</script>
<style lang="scss" scoped>
.el-container {
  //height: 100vh;
  //position: relative;
  //min-width: 1280px !important;
  .el-header {
    --el-header-padding: 0;
    --el-header-height: 50px;
    padding: var(--el-header-padding);
    box-sizing: border-box;
    flex-shrink: 0;
    height: var(--el-header-height);
    background: #ace0f9;
    box-shadow: #35406072 0 2px 15px;

    .header-link {
      color: #26678a;
      font-size: 1.1rem;
      line-height: 50px;

      a:-webkit-any-link {
        color: #26678a;
        cursor: pointer;
        text-decoration: none;
      }

      a.router-link-active.router-link-exact-active {
        color: #1290eb;
      }
    }
  }

  .el-aside {
    --el-aside-width: 300px;
    overflow: auto;
    background-color: #9bbeda;
    box-sizing: border-box;
    flex-shrink: 0;
    width: var(--el-aside-width);

    .el-submenu__title:hover, .el-menu-item:hover {
      background: #82aed8 !important;
      color: #fff !important;
    }

    .el-submenu__title.is-active, .el-menu-item.is-active {
      background: #82aed8 !important;
      color: #fff !important;
    }
  }

  .el-main {
    //min-width: 800px;
    top: 50px;
    height: calc(100vh - 110px);
    --el-main-padding: 0;
    flex: 1;
    flex-basis: auto;
    overflow: auto;
    box-sizing: border-box;
    background-color: rgba(71, 206, 175, 0.1);
    //height: 100%;
    /* padding: var(--el-main-padding); */
  }

  .el-footer {
    --el-footer-padding: 0;
    background-color: rgba(106, 197, 196, 0.73);
    --el-footer-height: 60px;
    padding: var(--el-footer-padding);
    box-sizing: border-box;
    flex-shrink: 0;
    height: var(--el-footer-height);

    li {
      list-style-type: none;
      line-height: 20px;
      color: #7f7f7f;
      padding: 5px 0;
      font-weight: 100;
    }
  }
}
</style>

然后在layout文件夹底下建立components文件夹用来放菜单栏组件
Menu.vue代码如下 ：

<template>
<div style="width: 100%;height: 100%">
  <el-menu :default-active="route.path"
           background-color="#8abcd10a"
           text-color="#fff"
           active-text-color="#ffd04b"
           :router="true"
           style="text-align: left"
  >
    <MenuItem :routes="routes"></MenuItem>
  </el-menu>

</div>
</template>

<script>
import MenuItem from "@/Layout/compontents/MenuItem";

export default {
  name: "Menu",
  components: {MenuItem},

}
</script>
<script setup>
import {useRoute, useRouter} from "vue-router";

const route =useRoute()
const router = useRouter()
const routes = router.options.routes //获取全部路由信息
// console.log('router', router.options.routes)
</script>
<style scoped>

</style>

MenuItem.vue

<template>
<div>
  <template v-for="(item,index) in routes" :key="index">
<!--没有子菜单-->
  <el-menu-item v-if="!item.hidden&& !item.children" :index="item.path">
    <i v-if="item.meta.icon&&item.meta.icon.includes('el')" :class="item.meta.icon"/>
    <base-svg-icon style="margin-right: 8px" v-else :icon-class="item.meta.icon"/>
    <span>{{item.meta.name}}</span>
  </el-menu-item>
<!--  有子菜单-->
    <el-submenu :index="item.path" v-if="item.children">
      <template #title>
        <span>
          <i v-if="item.meta.icon&&item.meta.icon.includes('el')" :class="item.meta.icon"/>
          <base-svg-icon style="margin-right: 8px" v-else :icon-class="item.meta.icon"/>
          {{item.meta.name}}</span>
      </template>
      <menu-item :routes="item.children"></menu-item>
    </el-submenu>
  </template>
</div>
</template>

<script>
import MenuItem from '@/Layout/compontents/MenuItem';
import BaseSvgIcon from "@/components/SvgIcon";
export default {
  name: "MenuItem",
  // eslint-disable-next-line vue/no-unused-components
  components: {MenuItem,BaseSvgIcon},

  data(){
    return{

    }
  },
  props:["routes"]
}
</script>

<style scoped>
i{
  color: #fff!important;
}
</style>

写在最后：

仅为新手对于layout布局的练手记录