vue2.0 - layout组件（三）Layout页面布局

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组件中写点文字)