Vue Academy · Aula

Configuração do Vue Router

Instale o Vue Router e defina suas primeiras rotas.

Configuração do Vue Router é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 1 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.

O que é o Vue Router?

O Vue Router é a biblioteca oficial de roteamento do Vue.

Mapeia URLs para componentes
Permite a navegação em uma página única sem recarregar a página inteira
Gerencia histórico, links e parâmetros

Instalando o Vue Router

Adicione o Vue Router ao seu projeto usando um gerenciador de pacotes.

# Install Vue Router 4 (for Vue 3)
npm install vue-router

# Or have it added during npm create vue@latest

Criando componentes de rota

Cada rota renderiza um componente. Comece com componentes de página simples.

<!-- Home.vue -->
<template>
  <h1>Home Page</h1>
</template>

<!-- About.vue -->
<template>
  <h1>About Page</h1>
</template>

Definindo a matriz routes

Uma matriz routes mapeia caminhos para componentes.

import Home from "./views/Home.vue"
import About from "./views/About.vue"

const routes = [
  { path: "/", component: Home },
  { path: "/about", component: About }
]

createRouter

A função createRouter cria um router a partir de routes e de um modo de histórico.

import { createRouter, createWebHistory } from "vue-router"

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

createWebHistory

createWebHistory usa a API de histórico do HTML5 para criar URLs limpas, como /about.

Nenhum fragmento na URL
Requer configuração do servidor para que links profundos funcionem
A alternativa é createWebHashHistory (/#/about)

Registrando o router

Instale o router no app usando app.use.

import { createApp } from "vue"
import App from "./App.vue"
import router from "./router"

createApp(App)
  .use(router)
  .mount("#app")

Componente de visualização da rota

O componente de visualização da rota é o local onde o componente da rota correspondente é renderizado.

<!-- App.vue -->
<template>
  <nav>...</nav>
  <router-view></router-view>
</template>

<!-- The current page renders here -->

Componente de link de rota

Use um componente de link de rota em vez de elementos de âncora comuns para navegar. Isso evita recarregar a página inteira.

<template>
  <nav>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </nav>
</template>

Estilizando links ativos

O componente de link de rota adiciona automaticamente classes CSS ao link ativo.

classe de link de rota ativo para correspondências parciais
classe de link de rota exatamente ativo para correspondências exatas

Estilize essas classes para destacar a página atual.

Reunindo tudo

O fluxo completo:

Defina routes que mapeiem caminhos para componentes
Crie o router com createRouter e createWebHistory
Registre-o com app.use(router)
Inclua a visualização da rota e navegue com componentes de link de rota

Verificação rápida

Teste sua compreensão sobre a configuração do Vue Router.

Recapitulação: configurando o Vue Router

Você configurou o roteamento no lado do cliente:

Instale com npm install vue-router
Defina uma matriz routes
Use createRouter com createWebHistory
Registre com app.use(router)
Use a visualização da rota e componentes de link de rota

A seguir: rotas aninhadas e dinâmicas.

Perguntas Frequentes

A aula “Configuração do Vue Router” é grátis?

Sim — o texto completo de “Configuração do Vue Router” é 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 “Configuração do Vue Router”?

Instale o Vue Router e defina suas primeiras rotas. 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 3.

Quanto tempo leva a aula “Configuração do Vue Router”?

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