前戏
前面我们已经写好了登录页面，当正常登录后应该跳转到首页
我们的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式
整体项目布局
因为我们的首页是个公共的组件，点击会员管理，供应商管理都不会变，所以我们可以放在components 下面，在下面创建一个 Layout.vue 的文件，写入如下内容
<template> <div> <div class="header">头部</div> <div class="navbar">左侧区域</div> <div class="main">主区域</div> </div> </template>
然后再router下的index.js里导入路由，新增了第七行和19，20，21行
1 import Vue from "vue"; 2 import Router from "vue-router"; 3 // import Login from '@/views/login/index' 4 5 // 下面的情况，默认会导入@/views/login下的index.vue组件 6 import Login from '@/views/login' 7 import Layout from '@/components/Layout' 8 Vue.use(Router); 9 10 11 export default new Router({ 12 routes: [ 13 { 14 path: '/login', 15 name: 'login', // 路由名称 16 component: Login // 组件对象 17 }, 18 { 19 path: '/', 20 name: 'layout', // 路由名称 21 component: Layout // 组件对象 22 }, 23 24 ] 25 });
然后我们正常登录，就可以看到首页了
这样当然是很难看的，我们可以在上面的基础上写上面和左边的导航栏
CSS样式实现布局
在 Layout.vue下实现头部样式，左侧样式，主区域，代码如下
<template> <div> <div class="header">头部</div> <div class="navbar">左侧区域</div> <div class="main">主区域</div> </div> </template> <style scoped> /* 头部样式 */ .header { position: absolute; line-height: 50px; top: 0px; left: 0px; right: 0px; background-color: #2d3a4b; } /* 左侧样式 */ .navbar { position: absolute; width: 230px; top: 50px; /* 距离上面50像素 */ left: 0px; bottom: 0px; overflow-y: auto; /* 当内容过多时y轴出现滚动条 */ background-color: #545c64; } /* 主区域 */ .main { position: absolute; top: 50px; left: 230px; bottom: 0px; right: 0px; /* 距离右边0像素 */ padding: 10px; overflow-y: auto; /* 当内容过多时y轴出现滚动条 */ /* background-color: red; */ } </style>
重新访问页面，布局如下
主区域，左侧区域，头部区域，我们不可能都放在 Layout.vue 里面，这样代码就显得冗余了，可以在 components 下面新建三个文件夹，分别为 AppHeader，Appmain，Appnavbar，里面各键一个index.vue 文件，如下，Appmain下的 Link.vue 先不用管它
然后我们把 Layout.vue 里的下面三行代码抽取出来放到对应的index.vue里面
<div class="header">头部</div> <div class="navbar">左侧区域</div> <div class="main">主区域</div>
例如AppHeader下的index.vue里面
<template> <div class="header">头部</div> </template>
这样我们提取出来了，需要在Layout下引用，代码如下
<template> <div> <!-- 使用子组件,使用-，不建议使用驼峰 --> <app-header></app-header> <app-navbar></app-navbar> <app-main></app-main> </div> </template> <script> // 会导入./AppHeader下面的index.vue组件 import AppHeader from "./AppHeader" import AppNavbar from "./AppNavbar" import AppMain from "./AppMain" // 导入子组件，缩写格式 AppHeader: AppHeader export default { components: { AppHeader, AppNavbar, AppMain } // 有s }; </script> <style scoped> /* 头部样式 */ .header { position: absolute; line-height: 50px; top: 0px; left: 0px; right: 0px; background-color: #2d3a4b; } /* 左侧样式 */ .navbar { position: absolute; width: 230px; top: 50px; /* 距离上面50像素 */ left: 0px; bottom: 0px; overflow-y: auto; /* 当内容过多时y轴出现滚动条 */ background-color: #545c64; } /* 主区域 */ .main { position: absolute; top: 50px; left: 230px; bottom: 0px; right: 0px; /* 距离右边0像素 */ padding: 10px; overflow-y: auto; /* 当内容过多时y轴出现滚动条 */ /* background-color: red; */ } </style>
刷新我们的页面，页面还是之前的样式，则我们的抽取没有问题
