第十课 布局后台管理主体部分

一、src/componens/创建Layout.vue

二、调整路由router/index.js

import Layout from '@/components/Layout.vue'

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/',
    name: 'Layout',
    component: Layout
  }
]

三、布局头部、左侧导航、主区域

<div class="header">头部</div>
<div class="navbar">左侧导航</div>
<div class="main">主区域</div>

.header {
  position: absolute;
  line-height: 50px;
  background-color: #130505;
  left: 0;
  right: 0;
  top: 0;
  color: #fff;
}
.navbar {
  position: absolute;
  width: 200px;
  background-color: #545c64;
  left: 0;
  right: 0;
  top: 50px;
  bottom: 0;
  color: #fff;
}
.main {
  position: absolute;
  background-color: #1e2020;
  left: 200px;
  right: 0;
  top: 50px;
  bottom: 0;
  padding: 20px;
  overflow-y: auto;
  color: #fff;
}

四、将头部、左侧导航、主区域抽为组件，并且导入到Layout.vue中

1）components/AppHeader/index.vue

2）components/AppNavbar/index.vue

3）components/AppMain/index.vue

Layout.vue

 <app-heder></app-heder>
 <app-navbar></app-navbar>
 <app-main></app-main>
 
<script>
import AppHeder from "@/components/AppHeader/index.vue"
import AppMain from "@/components/AppMain/index.vue"
import AppNavbar from "@/components/AppNavbar/index.vue"
export default {
  components:{
    AppHeder,
    AppMain,
    AppNavbar
  }
};
</script>