flaschengeist-frontend/src/plugins/user/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.permissions"
            />
          </q-list>
        </q-card-section>
      </q-card>
    </q-page>
    <router-view />
  </div>
</template>

<script lang="ts">
import { useRoute } from 'vue-router';
import { computed, defineComponent } from 'vue';
import mainRoutes from 'src/plugins/user/routes';
import EssentialLink from 'src/components/navigation/EssentialLink.vue';

export default defineComponent({
  // name: 'PageName'
  components: { EssentialLink },
  setup() {
    const route = useRoute();

    const checkMain = computed(() => {
      return route.matched.length == 2;
    });
    return { checkMain, mainRoutes };
  },
});
</script>