Introdução ao Vue Router
O Vue Router é a biblioteca oficial de roteamento para aplicações Vue.js, permitindo gerenciar a navegação entre diferentes componentes sem recarregar toda a página. Sua importância está em possibilitar a criação de Single Page Applications (SPA), oferecendo uma experiência fluida para o usuário.
Você deve utilizar o Vue Router quando seu projeto possuir múltiplas “páginas” ou vistas, como dashboards, perfis de usuário ou seções de produtos. Ele permite definir rotas que conectam URLs específicas a componentes Vue, possibilitando rotas dinâmicas, aninhadas e até mesmo proteções de acesso (Navigation Guards).
Neste tutorial, você aprenderá conceitos essenciais do Vue.js, incluindo sintaxe de componentes, estruturas de dados, algoritmos de navegação e princípios de programação orientada a objetos (OOP). Ao final, você será capaz de configurar rotas simples e dinâmicas, passar dados via props entre componentes e integrar o Vue Router de forma eficiente ao seu projeto.
Exemplo Básico
textimport { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
const Home = { template: '<h2>Página Inicial</h2>' }
const About = { template: '<h2>Sobre Nós</h2>' }
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
const router = createRouter({
history: createWebHistory(),
routes
})
const app = createApp({})
app.use(router)
app.mount('#app')Neste exemplo, criamos dois componentes simples, Home e About, com templates básicos. O array routes conecta cada URL a seu respectivo componente.
O createRouter cria a instância do Vue Router, utilizando createWebHistory para permitir navegação sem recarregar a página inteira. Por fim, o router é integrado à aplicação com app.use(router) e montado no elemento DOM com app.mount('#app').
Esse exemplo mostra os conceitos fundamentais do Vue Router: definição de rotas, associação com componentes, criação da instância do router e integração ao app Vue.
Exemplo Prático
textimport { createApp, defineComponent } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
const Home = defineComponent({
template: '<div><h2>Página Inicial</h2><p>Bem-vindo ao site!</p></div>'
})
const Profile = defineComponent({
props: ['username'],
template: '<div><h2>Perfil</h2><p>Olá, {{ username }}!</p></div>'
})
const routes = [
{ path: '/', component: Home },
{ path: '/profile/:username', component: Profile, props: true }
]
const router = createRouter({
history: createWebHistory(),
routes
})
const app = createApp({})
app.use(router)
app.mount('#app')Neste exemplo mais avançado, usamos defineComponent para criar Home e Profile. O componente Profile recebe props, permitindo que o parâmetro da URL (:username) seja passado para o componente.
Rotas dinâmicas, como '/profile/:username', permitem personalizar a navegação e exibir dados específicos de cada usuário. Passar props mantém os componentes moduláveis e facilita a manutenção do código, garantindo boas práticas para SPAs.
Boas práticas incluem criar rotas claras, usar props para passar dados entre componentes e evitar manipulação direta da URL. Erros comuns incluem rotas confusas, gestão inadequada de estado e componentes grandes que podem causar vazamentos de memória.
Para depuração, utilize Vue DevTools. Para otimização de desempenho, considere Lazy Loading, Navigation Guards e algoritmos eficientes de navegação. Para segurança, valide e escape os parâmetros da URL.
📊 Tabela de Referência
| Vue.js Element/Concept | Description | Usage Example |
|---|---|---|
| Router | Gerencia todas as rotas da aplicação | const router = createRouter({ history: createWebHistory(), routes }) |
| Route | Conecta uma URL a um componente | { path: '/about', component: About } |
| Props | Passa parâmetros de rota para o componente | { path: '/profile/:username', component: Profile, props: true } |
| createWebHistory | Ativa navegação SPA sem reload | history: createWebHistory() |
| Navigation Guards | Controla acesso às rotas | router.beforeEach((to, from, next) => { next() }) |
Após dominar o Vue Router, você poderá criar rotas dinâmicas, gerenciar dados entre componentes e controlar a navegação do aplicativo. Próximos tópicos recomendados incluem Lazy Loading, rotas aninhadas e Navigation Guards para melhorar desempenho e segurança.
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo