App.vue

main.js가 진입점이면 App.vue는 말 그대로 보여주는 모든것을 관리한다.

App.vue에서 전체화면을 관리하는 프레임이라고 보면 된다.

<template>
  <v-app>
    <v-card v-if="$store.state.appBarShow">
      <v-app-bar absolute app color="blue" dark elevation="1" dense>
        <v-app-bar-nav-icon @click.stop="topNavHidden" />
        <v-toolbar-title>{{$store.state.siteTitle}}</v-toolbar-title>
        <v-spacer />
        <v-btn icon>
          <v-icon>mdi-home</v-icon>
        </v-btn>
      </v-app-bar>
    </v-card>

    <v-card v-if="$store.state.appBarShow">
      <v-navigation-drawer
        persistent
        v-model="$store.state.drawer"
        :mini-variant.sync="mini"
        enable-resize-watcher
        fixed
        app
        width="250"
      >
        <v-list-item class="px-2">
          <v-list-item-avatar>
            <v-img :src="$store.state.user.img"></v-img>
          </v-list-item-avatar>
          <v-list-item-title>{{$store.state.user.name}}</v-list-item-title>
          <!--
          <v-btn icon @click.stop="mini = !mini">
            <v-icon>mdi-chevron-left</v-icon>
          </v-btn>
          -->
        </v-list-item>
        <v-list dense>
          <v-list-group
            v-for="(item,i) in items"
            v-model="item.act"
            :prepend-icon="item.icon"
            :key="i"
            no-action
          >
            <v-list-item slot="activator">
              <v-list-item-content>
                <v-list-item-title>{{item.title}}</v-list-item-title>
              </v-list-item-content>
            </v-list-item>
            <v-list-item v-for="subItem in item.subItems" :key="subItem.title" :to="subItem.to">
              <v-list-item-content>
                <v-list-item-title>{{ subItem.title}}</v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </v-list-group>
        </v-list>
      </v-navigation-drawer>
    </v-card>
    <v-main>
      <router-view />
    </v-main>
    <v-footer app absolute>
      <v-spacer></v-spacer>
      <div>&copy; {{ new Date().getFullYear() + ' ' + siteCopyright}}</div>
    </v-footer>

    <v-snackbar v-model="$store.state.sb.act" :color="$store.state.sb.color">
      <v-row align="center">
        <v-col class="grow">{{ $store.state.sb.msg }}</v-col>
        <v-col class="shrink">
          <v-btn left @click="$store.commit('pop', { act: false })">닫기</v-btn>
        </v-col>
      </v-row>
    </v-snackbar>
  </v-app>
</template>

<script>

export default {
  data: () => ({
    mini: false,
    siteCopyright: 'INVAKO',
    items: [
      {
        icon: 'donut_large',
        title: '대메뉴',
        act: true,
        subItems: [
          {
            title: '매입결과등록',
            to: {
              path: '/menu1'
            }
          },
          {
            title: '매입결과조회',
            to: {
              path: '/menu2'
            }
          },
          {
            title: '매입결과통계(그리드)',
            to: {
              path: '/menu3'
            }
          }
        ]
      }
    ]
  }),
  methods: {
    topNavHidden: function () { // 네비 숨김
      console.log('네비')
      this.$store.commit('setDrawer')
    },
    getInit: function () { // 화면새로고침 로그인 사용자 정보 셋팅
      this.$store.commit('setMemberInfo')
      // 컨트롤 호출해서 세션이 없으면 로그인 페이지나 에러페이지로 이동 으로 변경
      // 그냥 테스트용으로 로컬스토리지 값읽어서 처리
      // this.$router.push('/')
      this.$store.commit('setAppBarDrawer')
      this.$router.push('/login')
    }
  },
  mounted: function () {
    this.getInit()
  }
}
</script>