首先先展示最后页面效果
关于layout布局首先分为四个部分,其中最主要为侧边菜单栏
- 先展示关于是路由相关参数
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: '个人资料'
}
}
]
}
]
- 然后就是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布局的练手记录