App.vue_20211220

<template> 
  <div>

    <el-container>
      <el-header>
        <el-menu
          :default-active="defaultActive"
          class="el-menu-demo"
          mode="horizontal"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          @select="handleSelect">
          
          <el-menu-item index="1">Home</el-menu-item>
          <el-menu-item index="11">Login</el-menu-item>
          <el-menu-item index="12">Join</el-menu-item>
          <el-menu-item index="3">My Page</el-menu-item>          
          <el-sub-menu index="4">
            <template #title>Board</template>
            <el-menu-item index="4-1">Board</el-menu-item>
            <el-menu-item index="4-2">Form</el-menu-item>
            <el-sub-menu index="4-3">
              <template #title>Exam</template>
              <el-menu-item index="4-3-1">Exam10</el-menu-item>
              <el-menu-item index="4-3-2">Exam21</el-menu-item>
              <el-menu-item index="4-3-3">Exam31</el-menu-item>
            </el-sub-menu>
          <el-sub-menu index="5">
            <template #title>Table</template>
            <el-menu-item index="5-1">Table1</el-menu-item>
            <el-menu-item index="5-2">Table2</el-menu-item>
            <el-menu-item index="5-3">Table3</el-menu-item>
          </el-sub-menu>            
          </el-sub-menu>
          <el-menu-item index="6" disabled>Admin</el-menu-item>

        </el-menu>
      </el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-container>
          <el-main><router-view></router-view></el-main>
          <el-footer>Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>

    <h3>header</h3><hr />
    
    <div>
      <router-link to="/">홈화면</router-link> /
      <router-link to="/login">로그인</router-link> /
      <router-link to="/join">회원가입</router-link> /
      <router-link to="/board">게시판</router-link> /
      <router-link to="/form">form</router-link> /
      <router-link to="/login1">로그인1</router-link> /
      <router-link to="/iris">아이리스</router-link> /
      <router-link to="/exam10">exam10</router-link> /
      <router-link to="/exam21">exam21</router-link> /
      <router-link to="/exam31">exam31</router-link> /
      <router-link to="/admin">관리자페이지</router-link> /
      <router-link to="/table1">Table1</router-link> /
      <router-link to="/table2">Table2</router-link> /
      <router-link to="/table3">Table3</router-link> /
      <router-link to="/admin1">Admin1</router-link> /



    </div>

    <hr />
    <h3>footer</h3>
  </div>
</template>

<script>
export default {
  data() {
    return {
      defaultActive:'',
    }
  },
  methods: {
    handleSelect(idx) {
      console.log('App.vue => handleSelect', idx);
      if(idx === '1') {
        this.$router.push({path:'/'})
      }
      else if(idx === '11') {
        this.$router.push({path:'/login'})
      }
      else if(idx === '12') {
        this.$router.push({path:'/join'})
      }
      else if(idx === '3') {
        this.$router.push({parh:'/mypage'})
      }       
      else if(idx === '4-1') {
        this.$router.push({path:'/board'})
      }
      else if(idx === '4-2') {
        this.$router.push({path:'/form'})
      }  
      else if(idx === '4-3-1') {
        this.$router.push({path:'/exam10'})
      }  
      else if(idx === '4-3-2') {
        this.$router.push({path:'/exam21'})
      }  
      else if(idx === '4-3-3') {
        this.$router.push({path:'/exam31'})
      }  
      else if(idx === '5-1') {
        this.$router.push({path:'/table1'})
      } 
      else if(idx === '5-2') {
        this.$router.push({path:'/table2'})
      }  
      else if(idx === '5-3') {
        this.$router.push({path:'/table3'})
      }   
      else if(idx === '6') {
        this.$router.push({parh:'/admin'})
      }                                     
    }
  }
}

</script>

<style>
.el-header{
  background-color: #545c64;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 60px;
}
.el-footer {
  background-color: #545c64;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: var(--el-text-color-primary);
  text-align: center;
  /* height: 400px;
  line-height: 160px; */
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
  /* @import './assets/css/mystyle1.css';  */
  /* 하위 폴더 파일들에 CSS 적용하고 싶을 때 */
</style>