tnbapp/src/views/message/index.vue

<template>
  <v-container>
    <v-row>
      <v-col cols="2">
        <v-sheet rounded="lg">
          <v-list color="transparent">
            <router-link v-for="item in items" :key="item.text" :to="item.link">
              <v-list-item
                link
              >
                <v-list-item-action>
                  <v-icon>{{ item.icon }}</v-icon>
                </v-list-item-action>
                <v-list-item-content>
                  <v-list-item-title>
                    {{ item.text }}
                  </v-list-item-title>
                </v-list-item-content>
              </v-list-item>
            </router-link>

            <v-divider class="my-2" />

            <v-list-item
              link
              color="grey lighten-4"
            >
              <v-list-item-content>
                <v-list-item-title>
                  Refresh
                </v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </v-list>
        </v-sheet>
      </v-col>
      <v-col>
        <v-sheet
          min-height="70vh"
          rounded="lg"
        >
          <router-view />
        </v-sheet>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>

export default {
  data: () => ({
    drawer: true,
    items: [
      { icon: 'mdi-filmstrip-box-multiple', text: '回复我的', link: '/message' },
      { icon: 'mdi-upload', text: '@我的', link: '/message/setting' },
      { icon: 'mdi-upload', text: '受到的赞', link: '/message/setting' },
      { icon: 'mdi-upload', text: '系统消息', link: '/message/setting' },
      { icon: 'mdi-upload', text: '我的消息', link: '/message/setting' },
      { icon: 'mdi-upload', text: '私信存档', link: '/message/setting' },
      { icon: 'mdi-database', text: '消息设置', link: '/message/setting' }
    ]
  }),
  mounted() {
  },
  created() {
  },
  methods: {
  }
}
</script>

<style scoped>
  a {
    text-decoration: none;
  }
</style>