1 .layout组件需要依赖element-ui,所以需要提前安装此组件库
npm i element-ui -S
2. 安装完成以后在入口文件main.js配置如下
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
3. src - layout - index.js
export { default as HeadBar } from './Header.vue'
export { default as SlideBar } from './Sidebar/index.vue'
export { default as AppMain } from './Main.vue'
4. src - layout - index.vue 组件
<template>
<div>
<el-container>
<el-header>
<!-- 头部 -->
<HeadBar></HeadBar>
</el-header>
<el-container>
<el-aside :width="isCollapse ? '60px' : '200px'">
<!-- 左侧区域 -->
<SlideBar></SlideBar>
</el-aside>
<el-main>
<!-- 内容区域 -->
<AppMain></AppMain>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { HeadBar, SlideBar, AppMain } from "./components";
export default {
data() {
return {}
},
components: {
HeadBar,
SlideBar,
AppMain,
},
computed: {
...mapGetters([
'sidebar',
]),
// 是否关闭侧边栏
isCollapse() {
return !this.sidebar.opened
}
},
};
</script>
<style>
.el-aside{
overflow: hidden !important;
}
/* 加过渡给侧边导航*/
.el-aside {
transition: width 0.25s;
-webkit-transition: width 0.25s;
-moz-transition: width 0.25s;
-webkit-transition: width 0.25s;
-o-transition: width 0.25s;
}
</style>
5. 此时页面还没有布局- 此时去router.js路由组件去添加layout组件
import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入自己写的layout
import Layout from '@/layout'
Vue.use(VueRouter)
/* 防止重复路由点击报错 */
const originalReplace = VueRouter.prototype.replace;
VueRouter.prototype.replace = function replace(location) {
return originalReplace.call(this, location).catch(err => err);
};
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err);
};
const routes =[
{
path: '/',//根目录路由为/
component: Layout,//指定使用Layout组件布局
redirect: '/home',//重定向至/home页面
children: [{//子菜单信息
path: '/home',//路径
name: 'home',
component: () => import('@/views/Home.vue'),//指定组件
meta: { title: '首页', icon: 'el-icon-location' }
}]
},
{
path: '/list',
component: Layout,
children: [{
path: "/list",
name: 'List',
component: () => import('@/views/About.vue'),
meta: { title: 'list管理', icon: 'el-icon-s-tools' }
}]
}
]
const router = new VueRouter({
routes
})
export default router
6. 根组件App.vue修改路由信息
<template>
<div id="app">
<router-view/>
</div>
</template>
<style lang='scss'>
@import './styles/public.scss';
@import './styles/common.scss';
</style>
此时页面布局就出来了(自己在Header,Sidebar,Main组件中写点文字)