Navegação programática e useRouter
Composables router.push(), router.replace(), router.go(), useRouter() e useRoute().
Navegação programática e useRouter é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 4 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.
Navegando a partir do código
Além de RouterLink, muitas vezes você precisa navegar a partir do JavaScript — depois do envio de um formulário ou de um login. O composable useRouter fornece a instância do roteador para fazer isso.
Obtendo o roteador
Chame useRouter() dentro de <script setup>. O objeto retornado expõe push, replace, go e outros recursos.
import { useRouter } from 'vue-router'
const router = useRouter()Navegando com push
router.push adiciona uma entrada à pilha de histórico — como clicar em um link. A forma mais simples recebe uma string de caminho.
router.push('/dashboard')Usando push com um objeto de rota
Você também pode passar um objeto com name, params e query. Rotas nomeadas evitam caminhos fixos no código.
router.push({
name: 'user',
params: { id: 42 },
query: { tab: 'profile' }
})Replace: sem entrada no histórico
router.replace navega sem adicionar uma entrada ao histórico, portanto o botão voltar a ignora. Use-o após o login para impedir que os usuários voltem à página de login.
router.replace('/dashboard')Avançando e voltando
router.go(n) percorre o histórico em n etapas. router.go(-1) volta uma página; router.go(1) avança.
function goBack() {
router.go(-1)
}Depois de uma ação assíncrona
Um fluxo típico: envie um formulário, aguarde o resultado e depois navegue. push retorna uma Promise que você pode aguardar até a conclusão.
async function login() {
await auth.signIn(form)
router.push('/dashboard')
}Lendo a rota atual
Para ler os parâmetros e a consulta da rota atual, use o composable useRoute. Não o confunda com useRouter — useRoute é a rota, e useRouter é o navegador.
import { useRoute } from 'vue-router'
const route = useRoute()Acessando parâmetros
Leia segmentos dinâmicos por meio de route.params. Para uma rota /user/:id, o id está em route.params.id.
const userId = route.params.idAcessando strings de consulta
Leia a string de consulta por meio de route.query. Para ?tab=profile, use route.query.tab.
const tab = route.query.tabReagindo a mudanças nos parâmetros
Como route é reativa, observe-a com watch para reagir quando os parâmetros mudarem enquanto você permanece no mesmo componente.
import { watch } from 'vue'
watch(() => route.params.id, (newId) => {
loadUser(newId)
})Verificação rápida
Teste seus conhecimentos sobre navegação programática.
Recapitulação
Você aprendeu sobre navegação programática:
- useRouter() fornece push, replace e go.
- push adiciona ao histórico; replace não adiciona; go(-1) volta.
- push aceita uma string de caminho ou um objeto { name, params, query }.
- useRoute() lê os parâmetros e a consulta atuais e é reativo.
Perguntas Frequentes
A aula “Navegação programática e useRouter” é grátis?
Sim — o texto completo de “Navegação programática e useRouter” é 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 “Navegação programática e useRouter”?
Composables router.push(), router.replace(), router.go(), useRouter() e useRoute(). 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 4 de 4.
Quanto tempo leva a aula “Navegação programática e useRouter”?
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