Rotas diferentes com o mesmo arquivo .vue

<script setup lang="ts">
import BaseBreadcrumb from "@/components/shared/BaseBreadcrumb.vue";
import UiParentCard from "@/components/shared/UiParentCard.vue";
import { router } from "@/router";
import { useTemaStore } from "@/stores/apps/tema";
import { format } from "date-fns";
import { computed, onMounted, ref } from "vue";
import type { Header } from "vue3-easy-data-table";
import "vue3-easy-data-table/dist/style.css";

const store = useTemaStore();
onMounted(() => {
  store.listaEstudoTemaWithSumFilhos();
});

const getTemas = computed(() => {
  return store.temas;
});

const searchField = ref("nome");
const searchValue = ref("");

const headers: Header[] = [
  { text: "Sub-temas", value: "total", sortable: true },
  { text: "Tema", value: "nome", sortable: true },
  { text: "Criado em", value: "createdat", sortable: true },
  { text: "Atualizado em", value: "updatedat", sortable: true },
  { text: "Editado por", value: "nomepessoa", sortable: true },
  { text: "", value: "operation" },
];
const items = ref(getTemas);
const themeColor = ref("rgb(var(--v-theme-secondary))");
const page = ref({ title: "Temas de Estudo" });
const breadcrumbs = ref([
  {
    disabled: true,
    href: "#",
  },
]);
const visualizar = (id: number) => {
  router.push("/tema/" + id);
};
const subTemas = (id: number) => {
  router.push("/sub-tema/" + id);
};
</script>
<template>
  <v-row>
    <v-col cols="12" md="12">
      <BaseBreadcrumb
        :title="page.title"
        :breadcrumbs="breadcrumbs"
      ></BaseBreadcrumb>
    </v-col>
  </v-row>
  <v-row>
    <v-col cols="12" md="12">
      <UiParentCard title="Gerenciador dos Temas de Estudo">
        <v-row justify="space-between" class="align-center mb-3">
          <v-col cols="12" md="3">
            <v-text-field
              type="text"
              variant="outlined"
              placeholder="Pesquise pelo nome"
              v-model="searchValue"
              density="compact"
              hide-details
              prepend-inner-icon="mdi-magnify"
            />
          </v-col>
        </v-row>
        <EasyDataTable
          :headers="headers"
          :items="items"
          table-class-name="customize-table"
          :theme-color="themeColor"
          :search-field="searchField"
          :search-value="searchValue"
          :rows-per-page="5"
          buttons-pagination
        >
          <template #item-total="{ total }">
            <div class="player-wrapper">
              {{ total }}
            </div>
          </template>
          <template #item-nome="{ nome }">
            <div class="player-wrapper">
              {{ nome }}
            </div>
          </template>
          <template #item-createdat="{ createdat }">
            <div class="player-wrapper">
              {{ format(new Date(createdat), "dd/MM/yyyy HH:mm:ss") }}
            </div>
          </template>
          <template #item-updatedat="{ updatedat }">
            <div class="player-wrapper">
              {{ format(new Date(updatedat), "dd/MM/yyyy HH:mm:ss") }}
            </div>
          </template>
          <template #item-nomepessoa="{ nomepessoa }">
            <div class="player-wrapper">
              {{ nomepessoa }}
            </div>
          </template>
          <template #item-operation="item">
            <div class="operation-wrapper">
              <v-btn icon variant="text" @click="visualizar(item.id)">
                <v-tooltip activator="parent"> Visualizar </v-tooltip>
                <EyeIcon size="18" />
              </v-btn>
              <v-btn
                icon
                variant="text"
                v-if="item.total > 0"
                @click="subTemas(item.id)"
              >
                <v-tooltip activator="parent"> Ver Sub-temas </v-tooltip>
                <ApiAppIcon size="18" />
              </v-btn>
            </div>
          </template>
        </EasyDataTable>
      </UiParentCard>
    </v-col>
  </v-row>
</template>

const MainRoutes = {
  path: "/main",
  meta: {
    requiresAuth: true,
  },
  redirect: "/main",
  component: () => import("@/layouts/full/FullLayout.vue"),
  children: [
    {
      path: "/",
      redirect: "/dashboards/analytical",
    },
    {
      name: "Por tema",
      path: "/analise-tema",
      component: () => import("@/views/apps/analise-tema/AnaliseTema.vue"),
    },
    {
      name: "Análise Tema de Estudo",
      path: "/analise-tema/:id",
      component: () => import("@/views/apps/analise-tema/AnaliseTemaPorId.vue"),
    },
    {
      name: "Temas",
      path: "/tema",
      component: () => import("@/views/apps/tema/Tema.vue"),
    },
    {
      name: "Sub tema análise Tema",
      path: "/sub-tema/:id",
      component: () => import("@/views/apps/tema/Tema.vue"),
    },
  ],
};

export default MainRoutes;

{
      name: "Temas",
      path: "/tema",
      component: () => import("@/views/apps/tema/Tema.vue"),
    },

<v-btn
                icon
                variant="text"
                v-if="item.total > 0"
                @click="subTemas(item.id)"
              >
                <v-tooltip activator="parent"> Ver Sub-temas </v-tooltip>
                <ApiAppIcon size="18" />
              </v-btn>