home.vue

<template>
  <!-- <div :search="search"> -->
  <div>    
    <v-app-bar app flat >
      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>

      <v-toolbar-title>毕业设计</v-toolbar-title>

      <v-spacer></v-spacer>
      <!-- <v-text-field
        v-model="search"
        append-icon="mdi-magnify"
        label="Search"
        single-line
        hide-details
      ></v-text-field> -->

      <v-menu left bottom>
        <template v-slot:activator="{ on, attrs }">
          <v-btn icon v-bind="attrs" v-on="on">
            <v-icon>mdi-dots-vertical</v-icon>
          </v-btn>
        </template>

        <v-list>
          <v-list-item
            v-for="(item, index) in items"
            :key="index"
            router
            :to="item.route"
          >
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
    </v-app-bar>

    <v-navigation-drawer
      color="#AAAAA3"
      width="180px"
      v-model="drawer"
      app
      hide-overlay
      stateless
    >

    
      <v-list-item >
        <v-avatar >
          <img src="https://cdn.vuetifyjs.com/images/john.jpg" alt="John" />
        </v-avatar>
        <v-list-item-content style="text-align: center">
          <v-list-item-title class="title"> 某某 </v-list-item-title>
          <v-list-item-subtitle> DaiJuan </v-list-item-subtitle>
        </v-list-item-content>
      </v-list-item>

      <v-divider></v-divider>

      <v-list>
        <v-list-item
          v-for="(item, index) in items"
          :key="index"
          router
          :to="item.route"
          v-on:mouseover="showToggle(index)"
          v-on:mouseout="handleHide"
        >
          <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>

    <v-content>
      <router-view></router-view>
    </v-content>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: "Home",
  components: {},
  data() {
    return {
      drawer: true,
      // search: '',
      items: [
        {
          title: "基本信息",
          icon: "mdi-account-box",
          route: "/Home/Profile",
        },
        {
          title: "学术论文",
          icon: "mdi-paperclip",
          route: "/Home/Research",
        },
        { title: "软件著作权", icon: "mdi-keyboard", route: "/Home/Copyright" },
        { title: "量子模拟", icon: "mdi-apple-airplay", route: "/Home/Simulate" },        
        { title: "校园经历", icon: "mdi-home", route: "/Home/College" },
        { title: "实战经历", icon: "mdi-gavel", route: "/Home/Project" },
      ],
    };
  },
  mounted: function () {
    // 避免第一个渲染的显示
    this.isShow = -1;
  },
  methods: {
    showToggle: function (index) {
      this.isShow = index;
    },
    handleHide: function () {
      this.isShow = !this.isShow;
    },
  },
};
</script>