Routing - Roteamento

Estrutura de Rotas

{
  path: '/contracts',
  name: 'contracts',
  component: () => import('@/modules/contracts/pages/ListContracts.vue'),
  meta: {
    title: 'routes.contracts',
    transition: 'slide-left'
  }
}

---

Rotas por Módulo

• Cada módulo exporta suas rotas em modules/[modulo]/router/index.ts
• O arquivo principal src/router/index.ts importa e combina todas as rotas

---

Regras de Layout de Páginas

Título e Subtítulo

IMPORTANTE: Não adicionar título (<h1>) ou subtítulo dentro das páginas. O título da página já é exibido automaticamente no Header através da configuração de rotas (meta.title).

{
  path: '/templates/new',
  name: 'new-template',
  component: () => import('@/modules/templates/pages/CreateTemplate.vue'),
  meta: { title: i18n.global.t('routes.templates.new') }
}

Errado:

<template>
  <container-app>
    <h1>Novo Template</h1>
    <p>Criar e gerenciar templates...</p>
    <!-- conteúdo -->
  </container-app>
</template>

Correto:

<template>
  <container-app>
    <!-- conteúdo direto, sem título -->
  </container-app>
</template>

---

Navegação

IMPORTANTE: O botão de voltar é gerenciado automaticamente pelo TopHeader. Páginas de listagem não exibem o botão, enquanto páginas de detalhe/edição exibem automaticamente.

Tipo de Página	Botão Voltar	Configuração
Listagem	❌ Não	meta: { isListPage: true }
Detalhe	✅ Sim	Automático (sem isListPage)
Edição/Criação	✅ Sim	Automático (sem isListPage)

Páginas de listagem devem configurar isListPage: true no meta da rota:

{
  path: '/my-contract',
  name: 'my-contract',
  meta: { isListPage: true, menuKey: 'my-contract' }
}

Páginas de detalhe/edição NÃO devem ter subheader próprio. O título e botão de voltar vêm do TopHeader:

<template>
  <container-app>
    <!-- Botões de ação no topo, se necessário -->
    <div v-if="hasActions" class="flex justify-end mb-6">
      <n-button type="primary" @click="handleAction">Ação</n-button>
    </div>
    <!-- Cards de conteúdo -->
    <div class="bg-white dark:bg-neutral-800 rounded-lg p-6">
      <!-- conteúdo -->
    </div>
  </container-app>
</template>

---

Menu Lateral Ativo

Para manter o item do menu lateral ativo em sub-rotas, use meta.menuKey nas rotas:

{
  path: '/my-contract',
  name: 'my-contract',
  meta: { isListPage: true, menuKey: 'my-contract' }
},
{
  path: '/contract-provider/:id',
  name: 'my-contract-detail',
  meta: { menuKey: 'my-contract' }  // Mesmo menuKey mantém o menu ativo
}

O menuKey deve corresponder ao group definido no menu em ListMenu.vue.