App.vue

<template>
  <v-app id="inspire">
    <v-navigation-drawer v-model="drawer" app>
      <v-list dense>
        <v-list-item router :to="{name: 'home'}">
          <v-list-item-action>
            <v-icon>mdi-home</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title>Home</v-list-item-title>
          </v-list-item-content>
        </v-list-item>

        <v-list-item v-if="isLogin === false" router :to="{name: 'login'}">
          <v-list-item-action>
            <v-icon>mdi-contact-mail</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title>로그인</v-list-item-title>
          </v-list-item-content>
        </v-list-item>

        <v-list-item v-if="isLogin === true" router :to="{name: 'mypage'}" exact>
          <v-list-item-action>
            <v-icon>mdi-contact-mail</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title>마이페이지</v-list-item-title>
          </v-list-item-content>
        </v-list-item>

        <v-list-item v-if="isLogin === true" router :to="{name: 'club'}" exact>
          <v-list-item-action>
            <v-icon>mdi-contact-mail</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title>동아리 구경</v-list-item-title>
          </v-list-item-content>
        </v-list-item>

        <v-list-item v-if="isLogin === true" exact>
          <v-list-item-action>
            <v-icon>mdi-xbox-controller</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title>내 동아리</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
            <!--동아리 메뉴-->
          <div v-if="isLogin === true">
            <v-menu offset-x v-for="(club, index) in clubs" :key="index">
              <template v-slot:activator="{ on }">
              <v-list-item>
                <v-btn v-on="on" block style="margin-bottom:15px">{{club.club}}</v-btn>
              </v-list-item> 
              </template>
              <v-list>
                <v-list-item>
                <v-btn block router :to="{name: 'club_manage'}">동아리 관리</v-btn>
                </v-list-item>
                <v-list-item>
                  <v-btn block router :to="{name: 'club_post'}">게시판</v-btn>
                </v-list-item> 
                <v-list-item>
                  <v-btn block router :to="{name: 'club_calendar'}">공용 캘린더</v-btn>
                </v-list-item>
              </v-list>
            </v-menu>
          </div>
      </v-list>

    </v-navigation-drawer>
    <v-app-bar app color="indigo" dark>
      <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
      <v-toolbar-title>Application</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-toolbar-items class="hidden-sm-and-down">
        <v-btn flat v-if="isLogin">{{userInfo.name}}</v-btn>
        <v-btn flat v-else router :to="{name: 'login'}">Log In</v-btn>
      </v-toolbar-items>
    </v-app-bar>

    <v-content>
      <router-view></router-view>
    </v-content>
    <v-footer color="indigo" app>
      <span class="white--text">&copy; 2019</span>
    </v-footer>
  </v-app>
</template>

<script>
import {mapState} from "vuex"

  export default {
    props: {
      source: String,
    },
    data: () => ({
      drawer: null,
      clubs:[
        {id:1, club:'club1'},
        {id:2, club:'club2'},
        {id:3, club:'club3'},
        {id:4, club:'club4'},
        {id:5, club:'club5'},
        {id:6, club:'club6'}
      ]
    }),
    computed:{
      ...mapState(['isLogin']),
      ...mapState(['userInfo'])
    }
  }
</script>