基于vue的后台管理 之 后台管理首页---头部导航

在 搭建项目前篇中提到，没有接口就先做首页，有接口就尽量从登录页面开始做。这一步。我到了首页界面的搭建
应用到element中的布局容器组件

首页布局

<el-container>
	//头部导航
  <el-header class="nav">
      <el-image :src="img" class="avatarImg" :fit="fit" ></el-image>
       <span class="pStyle">后台管理系统</span>
       <el-button @click="logout" class="logoutBtn">退出登录</el-button>
   </el-header>
  
  <el-container>
  	// 侧边栏
    <el-aside width="200px">Aside</el-aside>
    
    <el-container>
    	//内容区
      <el-main>Main</el-main>
  
    </el-container>
  </el-container>
</el-container>

逻辑中需要实现退出功能

//实现退出功能
logout() {	
	//清除token
	window.sessionStorage.clear()
	// 退出到登录界面
    this.$router.push('/login')
 },