App.vue

<template> 
  <div>
  <div style="margin: 20px"></div>
    <el-form>
    </el-form>

    <!-- 고객용 페이지 레이아웃 -->
    <el-container v-if="admin === false">
      <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-item index="7">Admin1</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>

    <!-- 관리자 페이지 레이아웃 -->
    <el-container v-else-if="admin === true">
      <el-header>Header</el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
      <el-footer>Footer</el-footer>
    </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> /
      <router-link to="/compslotscope">CompSlotScope</router-link> /



    </div>

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

<script>
export default {
  created() {
     /* 관리자페이지는 레이아웃 2번 (admin, admin1)
        일반 페이지는 레이아웃 1번 */
    console.log(window.location.pathname);
    if ( window.location.pathname === '/admin1' ||
          window.location.pathname === '/admin' ) {
      this.admin = true;
    }
    else {
      this.admin = false;
    }
  },
  data() {
    return {
      defaultActive:'',
      admin: false,
    }
  },
  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'})
      }       
      else if(idx === '7') {
        this.$router.push({parh:'/admin1'})
      }                               
      else if(idx === '4') { // a태그로 페이지 전환
        window.location.href="/admin1";
      }
    }
  }
}

</script>

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