Campos meta de rotas e tipagem
meta: { requiresAuth: true }, mesclagem de declarações TypeScript para metadados tipados.
Campos meta de rotas e tipagem é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.
O que são campos meta das rotas?
Cada rota pode conter um objeto meta: dados arbitrários associados à rota. Ele é perfeito para indicadores como requisitos de autenticação, funções permitidas, títulos de página ou escolhas de layout.
Adicionando meta a uma rota
Defina a chave meta em um registro de rota. Os valores ficam inteiramente a seu critério.
const routes = [
{
path: '/dashboard',
component: Dashboard,
meta: { requiresAuth: true, roles: ['admin', 'editor'] }
}
]Lendo meta em uma proteção
O uso mais comum é em uma proteção de navegação. router.beforeEach é executado antes de cada navegação e recebe a rota de destino, cujo meta você pode inspecionar.
router.beforeEach((to, from) => {
if (to.meta.requiresAuth) {
// check login
}
})Redirecionando usuários não autenticados
Retorne uma localização de rota na proteção para redirecionar. Retornar false cancela a navegação; não retornar nada ou retornar true permite que ela prossiga.
router.beforeEach((to) => {
const auth = useAuthStore()
if (to.meta.requiresAuth && !auth.isLoggedIn) {
return { path: '/login' }
}
})Acesso baseado em funções
Combine o campo meta roles com a função do usuário atual para controlar o acesso às páginas por permissão.
router.beforeEach((to) => {
const auth = useAuthStore()
const roles = to.meta.roles
if (roles && !roles.includes(auth.role)) {
return { path: '/forbidden' }
}
})Meta é mesclado a partir das rotas ancestrais
As rotas aninhadas herdam meta de suas rotas ancestrais por meio de to.meta, que mescla todos os registros correspondentes. Uma rota filha vê o meta da rota ancestral, a menos que substitua a mesma chave.
O problema da tipagem
Por padrão, o TypeScript tipa meta como um objeto vazio, portanto to.meta.requiresAuth gera um erro. Você corrige isso com a mesclagem de declarações nos tipos do Vue Router.
Declarando meta tipado
Amplie a interface RouteMeta de vue-router. Coloque isso em um arquivo .d.ts ou em qualquer módulo com um export {}.
import 'vue-router'
declare module 'vue-router' {
interface RouteMeta {
requiresAuth?: boolean
roles?: string[]
}
}
export {}Agora meta é verificado pelo sistema de tipos
Após a ampliação, o compilador conhece o formato de meta. Erros de digitação como requireAuth são detectados, e o preenchimento automático funciona.
router.beforeEach((to) => {
if (to.meta.requiresAuth) { /* typed as boolean | undefined */ }
})Usando meta em componentes
Dentro de um componente, você pode ler o meta da rota atual por meio de useRoute() — que também recebe tipagem graças à ampliação.
import { useRoute } from 'vue-router'
const route = useRoute()
const secure = route.meta.requiresAuthMeta para títulos de página
Um padrão comum: armazene um title em meta e defina document.title a partir de uma proteção global.
router.afterEach((to) => {
if (to.meta.title) document.title = to.meta.title
})Verificação rápida
Teste seus conhecimentos sobre meta de rotas e tipagem.
Recapitulação
Os campos meta das rotas contêm dados específicos de cada rota:
- Defina meta nos registros de rota (requiresAuth, roles, title).
- Leia-o em router.beforeEach para proteger a navegação.
- Meta é mesclado das rotas ancestrais às rotas filhas.
- Faça a tipagem com mesclagem de declarações em RouteMeta de vue-router.
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 42
- Aulas
- 156
Perguntas Frequentes
A aula “Campos meta de rotas e tipagem” é grátis?
Sim — o texto completo de “Campos meta de rotas e tipagem” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.
O que vou aprender em “Campos meta de rotas e tipagem”?
meta: { requiresAuth: true }, mesclagem de declarações TypeScript para metadados tipados. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Vue Academy?
Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “Campos meta de rotas e tipagem”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Vue Academy?
Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Campos meta de rotas e tipagem
- Transições e animações de rotas
- Configuração do comportamento de rolagem
- Navegação programática e useRouter