Vuetify——使用v-navigation-drawer组件

v-navigation-drawer 是您的用户用于导航应用程序的组件。 导航抽屉被预先配置为可以在有或没有 vue-router 的情况下使用。 为了显示的目的，一些示例被包装在 v-card 元素中。 在您的应用程序中，通常会把 v-navigation-drawer 组件作为 v-app 的直接子组件。

<template>
  <v-app id="app">
    <v-app-bar
      app
      elevation="1"
      light
      clipped-right
      class="v-bar--underline"
    >
      <v-app-bar-nav-icon
        v-if="!drawer"
        @click="drawer = !drawer"
      ></v-app-bar-nav-icon>
      <v-spacer></v-spacer>
      <div class="text-center">
        <v-menu open-on-hover bottom offset-y>
          <template v-slot:activator="{ on, attrs }">
            <v-btn text v-bind="attrs" v-on="on" color="#444">
              {{ fullname || login_name }}
              <v-icon class="ml-1">mdi-account</v-icon>
            </v-btn>
          </template>
          <v-sheet class="overflow-hidden">
            <v-list dense expand nav>
              <v-list-item to="/user/home">
                <v-list-item-title class="d-flex align-center">
                  <v-icon class="mr-2">mdi-account</v-icon>
                  用户首页
                </v-list-item-title>
              </v-list-item>
              <v-list-item  @click="logout()">
                <v-list-item-title class="d-flex align-center">
                  <v-icon class="mr-2">mdi-logout</v-icon>
                  登出
                </v-list-item-title>
              </v-list-item>
            </v-list>
          </v-sheet>
        </v-menu>
      </div>
    </v-app-bar>
    <v-navigation-drawer
      v-model="drawer"
      app
      floating
      fixed
      width="300"
      v-if="role"
    >
      <v-list
        dense
        nav
        style="border-right: 1px solid #0000001f;"
        class="fill-height"
      >
        <v-list-group>
          <v-list-item>
            <v-list-item-title>Foo</v-list-item-title>
          </v-list-item>

          <v-list-item>
            <v-list-item-title>Bar</v-list-item-title>
          </v-list-item>
        </v-list-group>
      </v-list>
    </v-navigation-drawer>
  </v-app>
</template>

data(){
	return {
		drawer: true,
        login_name: null,
        fullname: null
	}
}