flaschengeist-frontend/src/plugins/balance/pages/MainPage.vue

<template>
  <div>
    <q-page padding v-if="checkMain">
      <q-card>
        <q-card-section>
          <q-list
            v-for="(mainRoute, index) in mainRoutes"
            :key="'mainRoute' + index"
          >
            <essential-link
              v-for="(route, index2) in mainRoute.children"
              :key="'route' + index2"
              :title="route.title"
              :icon="route.icon"
              :link="route.name"
              :permissions="route.meta.permissions"
            />
          </q-list>
        </q-card-section>
      </q-card>
    </q-page>
    <router-view />
  </div>
</template>

<script lang="ts">
import { computed, defineComponent } from '@vue/composition-api';
import EssentialLink from 'src/components/navigation/EssentialLink.vue';
import mainRoutes from 'src/plugins/balance/routes';
import { Store } from 'vuex';
import { BalanceInterface } from 'src/plugins/balance/store/balance';
import setLoadingBar from 'src/utils/loading';
import { StateInterface } from 'src/store';
export default defineComponent({
  // name: 'PageName'
  components: { EssentialLink },
  setup(_, { root }) {
    const store = <Store<StateInterface>>root.$store;
    const loading = computed(() => {
      return (<BalanceInterface>store.state.balance).loading > 0;
    });
    const checkMain = computed(() => {
      return root.$route.matched.length == 2;
    });

    setLoadingBar(loading);

    return { checkMain, mainRoutes };
  }
});
</script>