MainLayout.vue

<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated>
      <q-toolbar>
        <q-btn flat dense round @click="toggleLeftDrawer">
          <q-avatar>
            <img
              :src="
                leftDrawerOpen
                  ? require('./menuListIcons/toggle-left-drawer-show.svg')
                  : require('./menuListIcons/toggle-left-drawer-hide.svg')
              "
            />
          </q-avatar>
        </q-btn>

        <q-toolbar-title> Quasar App </q-toolbar-title>
        <q-tabs
          v-model="defaultRouter"
          no-caps
          shrink
          active-color="white"
          active-bg-color="headeractive"
        >
          <q-tab
            class="my-tab"
            v-for="page in tabsList"
            :key="page.link"
            :name="page.link"
            :label="page.title"
            @click.stop="clickTab(page)"
          >
            <q-btn
              v-show="tabsList.length > 1"
              dense
              flat
              round
              size="sm"
              icon="close"
              @mousedown.stop="doNothing"
              @click.stop="closeTab(page)"
            >
            </q-btn>
          </q-tab>
        </q-tabs>

        <q-space />
        <language-select />
        <div>Quasar v{{ $q.version }}</div>
      </q-toolbar>
    </q-header>

    <q-drawer v-model="leftDrawerOpen" show-if-above bordered>
      <q-list>
        <q-item-label header style="padding: 0">
          <TopLeftLoading />
        </q-item-label>

        <EssentialLink
          v-for="link in essentialLinks"
          :key="link.title"
          v-bind="link"
        />
      </q-list>
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, reactive, toRefs } from 'vue';
import { onBeforeRouteUpdate, useRouter } from 'vue-router';
import { usePageStore } from 'src/common/hooks';
import EssentialLink from 'components/EssentialLink.vue';
import TopLeftLoading from './TopLeftLoading.vue';
import LanguageSelect from './element/LanguageSelect.vue';

export default defineComponent({
  name: 'MainLayout',

  components: {
    EssentialLink,
    TopLeftLoading,
    LanguageSelect,
  },

  setup() {
    const pageStore = usePageStore();
    const router = useRouter();
    const leftDrawerOpen = ref(false);
    const defaultRouter = ref('/page1');
    const linksList = ref<any>([]);
    const state = reactive({
      tabsList: [] as any,
    });

    onBeforeRouteUpdate((to, from, next) => {
      defaultRouter.value = to.path;
      if (to.matched.length == 3) {
        pageStore.addRoute(to as any);
        getTabsList();
      }
      next();
    });
    onMounted(() => {
      getLinksList();
      const path = router.currentRoute.value.path;
      defaultRouter.value = path;
      pageStore.addRoute(router.currentRoute.value as any);
      getTabsList();
    });

    const getLinksList = () => {
      const lists = [
        {
          title: '一',
          caption: '日历',
          icon: require('./menuListIcons/page1.svg'),
          link: '/page1',
          active: true,
        },
        {
          title: '贰',
          caption: '2',
          icon: require('./menuListIcons/page2.svg'),
          link: '/page2',
          active: false,
        },
        {
          title: '叁',
          caption: '3',
          icon: require('./menuListIcons/page3.svg'),
          link: '/page3',
          active: false,
        },
        {
          title: '四',
          caption: '4',
          icon: require('./menuListIcons/page4.svg'),
          link: '/page4',
          active: false,
        },
        {
          title: '五',
          caption: '5',
          icon: require('./menuListIcons/page5.svg'),
          link: '/page5',
          active: false,
        },
        {
          title: '六',
          caption: '一些js练习',
          icon: require('./menuListIcons/page6.png'),
          link: '/page6',
          active: false,
        },
        {
          title: '七',
          caption: '疫情防控',
          icon: require('./menuListIcons/page7.svg'),
          link: '/page7',
          active: false,
        },
      ];

      for (const item of lists) {
        if (item.link === defaultRouter.value) {
          item.active = true;
        } else {
          item.active = false;
        }
      }

      linksList.value = lists;
    };

    const getTabsList = () => {
      state.tabsList = pageStore.tabRouterList.map((item: any) => {
        return {
          title: item.meta?.title,
          link: item.path,
          keepalive: item.meta?.keepalive,
          permission: item.meta?.permission,
        };
      });
    };

    const clickTab = (page: any) => {
      router.push(page.link);
    };

    const closeTab = (page: any) => {
      pageStore.removePage(page.link);
      getTabsList();
      router.push(pageStore.activeRouter.path);
    };

    const doNothing = () => {
      // to prevent tab close button ripple effect
    };

    return {
      ...toRefs(state),
      essentialLinks: linksList,
      leftDrawerOpen,
      toggleLeftDrawer() {
        leftDrawerOpen.value = !leftDrawerOpen.value;
      },
      linksList,
      pageStore,
      defaultRouter,
      clickTab,
      closeTab,
      doNothing,
    };
  },
});
</script>
<style lang="scss" scoped>
.my-tab {
  :deep(.q-tab__content) {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    > button {
      color: transparent;
    }
    &:hover > button {
      color: white;
    }
    .q-tab__label {
      flex: 1;
    }
  }
}
</style>