Vue Academy · Aula

Rotas aninhadas e dinâmicas

Crie layouts aninhados e parâmetros de rota dinâmicos.

Rotas aninhadas e dinâmicas é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 2 de 3. 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 3 aulas no total.

Além das rotas estáticas

Aplicativos reais precisam de rotas que transportem dados e sejam aninhadas em layouts.

Segmentos dinâmicos capturam valores como um identificador
Rotas aninhadas renderizam elementos filhos dentro de um elemento pai
Rotas nomeadas e navegação programática oferecem mais flexibilidade

Segmentos de rota dinâmicos

Os dois-pontos definem um segmento dinâmico que corresponde a qualquer valor.

const routes = [
  { path: "/user/:id", component: UserProfile }
]

// Matches /user/1, /user/42, /user/abc

Acessando route.params

Leia o valor capturado por meio de route.params.

<script setup>
import { useRoute } from "vue-router"

const route = useRoute()
console.log(route.params.id)
</script>

Reagindo a alterações de parâmetros

Quando somente o parâmetro é alterado, por exemplo, de /user/1 para /user/2, o componente é reutilizado. Observe o parâmetro para recarregar os dados.

import { watch } from "vue"
import { useRoute } from "vue-router"

const route = useRoute()
watch(() => route.params.id, (newId) => {
  loadUser(newId)
})

Vários segmentos dinâmicos

As rotas podem ter várias partes dinâmicas.

const routes = [
  { path: "/user/:userId/post/:postId", component: Post }
]

// route.params.userId and route.params.postId

Rotas aninhadas

Rotas aninhadas permitem que rotas filhas sejam renderizadas dentro de um componente pai.

const routes = [
  {
    path: "/user/:id",
    component: UserLayout,
    children: [
      { path: "profile", component: Profile },
      { path: "posts", component: Posts }
    ]
  }
]

Visualização de rota aninhada

O componente pai precisa ter sua própria visualização da rota para que os elementos filhos sejam renderizados nela.

<!-- UserLayout.vue -->
<template>
  <h1>User</h1>
  <router-view></router-view>
</template>

<!-- /user/1/profile renders Profile here -->

Rotas nomeadas

Dê um nome a uma rota para referenciá-la sem definir o caminho diretamente no código.

const routes = [
  {
    path: "/user/:id",
    name: "user",
    component: UserProfile
  }
]

Vinculando por nome

Um componente de link de rota pode apontar para uma rota nomeada e passar parâmetros como um objeto.

<router-link
  :to="{ name: 'user', params: { id: 42 } }"
>
  View User
</router-link>

Navegação programática

Navegue a partir do JavaScript usando o método push do router.

import { useRouter } from "vue-router"

const router = useRouter()

function goToUser(id) {
  router.push({ name: "user", params: { id } })
}

Outros métodos de navegação

O router oferece outros auxiliares de navegação:

router.push adiciona uma nova entrada ao histórico
router.replace navega sem adicionar uma nova entrada ao histórico
router.back volta à página anterior

Verificação rápida

Teste sua compreensão sobre rotas dinâmicas e aninhadas.

Recapitulação: rotas aninhadas e dinâmicas

Você aprendeu roteamento avançado:

Segmentos dinâmicos (/user/:id) capturados em route.params
Rotas aninhadas por meio de children e de uma visualização de rota aninhada
Rotas nomeadas permitem criar links por nome
router.push navega programaticamente

A seguir: guardas de navegação.

Perguntas Frequentes

A aula “Rotas aninhadas e dinâmicas” é grátis?

Sim — o texto completo de “Rotas aninhadas e dinâmicas” é 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 3 aulas no total.

O que vou aprender em “Rotas aninhadas e dinâmicas”?

Crie layouts aninhados e parâmetros de rota dinâmicos. 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 2 de 3.

Quanto tempo leva a aula “Rotas aninhadas e dinâmicas”?

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

← Voltar para Vue Academy