Mysql+Nodejs+Koa2+Vue+Quasar零起点教

【Mysql+Nodejs+Koa2+Vue+Quasar零起点教程11：应用界面开发】中涉及的MainLayout.vue文件源代码

<template>

<q-layout view="hHh Lpr fFf">

  <q-header elevated>

    <q-toolbar>

      <q-btn flat dense round icon="menu" aria-label="Menu" @click="leftDrawerOpen = !leftDrawerOpen" />

      <q-toolbar-title>

        学生管理信息系统

      </q-toolbar-title>

      <q-btn dense icon="exit_to_app" color="primary" label="注销登录" @click="logOut" />

    </q-toolbar>

  </q-header>

  <q-drawer v-model="leftDrawerOpen" show-if-above bordered class="bg-grey-3">

    <q-list>

      <q-item-label header class="text-grey-8">

        <q-avatar round>

          <q-img src="~assets/1.jpg" />

        </q-avatar>

        {{cur_username}}

      </q-item-label>

      <q-item clickable @click="gototask(1)">

        <q-item-section avatar>

          <q-icon name="security" />

        </q-item-section>

        <q-item-section>

          <q-item-label>登录管理</q-item-label>

          <q-item-label caption>

            增删改查登录账号信息

          </q-item-label>

        </q-item-section>

      </q-item>

      <q-item clickable @click="gototask(2)">

        <q-item-section avatar>

          <q-icon name="perm_contact_calendar" />

        </q-item-section>

        <q-item-section>

          <q-item-label>学生管理</q-item-label>

          <q-item-label caption>

            增删改查学生信息

          </q-item-label>

        </q-item-section>

      </q-item>

    </q-list>

  </q-drawer>

  <q-page-container>

    <router-view />

  </q-page-container>

</q-layout>

</template>

<script>

import {

  defineComponent,

  ref

} from 'vue'

import {

  SessionStorage

} from "quasar";

export default defineComponent({

  name: 'MainLayout',

  components: {},

  data() {

    return {

      cur_username: '',

      leftDrawerOpen: false,

    }

  },

  methods: {

    logOut() {

      this.$router.push({

        path: '/'

      });

    },

    gototask(taskid) {

      if (taskid == 1) {

        this.$router.push({

          name: 'user'

        });

      };

      if (taskid == 2) {

        this.$router.push({

          name: 'student'

        });

      };

    },

    checkislogin() {

      let value = SessionStorage.getItem("userinfo");

      if (value) {

        this.cur_username = value;

      } else {

        this.$router.push({

          path: '/'

        });

      };

    }

  },

  mounted() {

    this.checkislogin();

  },

});

</script>

<style scoped>

</style>