Vue.js Navigation drawer와 router 구현

App.vue에 navigation drawer 예제를 첨부하여 v-app-bar-nav-icon과 연결한다.

list item에 :to를 통해 router-view에 연결할 페이지를 연결한다.

그리고 router-view를 통해 화면을 보여준다.

<template>
  <v-app>
    <v-card
      color="grey lighten-4"
      flat
    >
      <v-app-bar
        color="primary"
        dark
        dense
      >
        <v-app-bar-nav-icon @click="drawer = !drawer" />
        <v-toolbar-title>Stock Rebalancing</v-toolbar-title>
        <v-spacer />
      </v-app-bar>
    </v-card>
    <v-navigation-drawer
      v-model="drawer"
      absolute
      temporary
    >
      <v-list-item>
        <v-list-item-avatar>
          <v-icon>mdi-account</v-icon>
        </v-list-item-avatar>

        <v-list-item-content>
          <v-list-item-title>John Leider</v-list-item-title>
        </v-list-item-content>
      </v-list-item>

      <v-divider />

      <v-list dense>
        <v-list-item
          v-for="item in items"
          :key="item.title"
          link
          :to="item.to"
        >
          <v-list-item-icon>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-icon>

          <v-list-item-content>
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
    <router-view />
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      drawer: false,
      items: [
        {
          title: 'Home',
          icon: 'mdi-home',
          to: '/'
        },
        {
          title: 'About',
          icon: 'mdi-information',
          to: '/about'
        },
      ]
    }
  },
}
</script>