Pular para conteúdo

Roteamento

Conceitos de roteamento

Quando desenvolvemos aplicações web, é comum que elas tenham mais de uma página. Para facilitar a navegação entre essas páginas, utilizamos o conceito de roteamento. O roteamento é o processo de determinar qual conteúdo deve ser exibido em uma página web com base na URL acessada pelo usuário.

Vale lembrar que quando usamos o VueJS estamos desenvolvendo uma Single Page Application (SPA), ou seja, uma aplicação web que carrega uma única página HTML e atualiza o conteúdo dinamicamente, sem a necessidade de recarregar a página. O roteamento em uma SPA é feito de forma dinâmica, sem a necessidade de recarregar a página.

No VueJS, o roteamento é feito com o Vue Router, uma biblioteca oficial que nos permite adicionar rotas à nossa aplicação. Com o Vue Router, podemos definir diferentes rotas para a nossa aplicação e associar cada rota a um componente específico. Dessa forma, quando o usuário acessa uma determinada URL, o Vue Router carrega o componente correspondente e exibe o conteúdo na página.

Neste capítulo, vamos aprender a utilizar o Vue Router para adicionar rotas à nossa aplicação VueJS. Vamos criar um projeto VueJS com o Vue Router e adicionar rotas para diferentes páginas. Além disso, vamos aprender a navegar entre as páginas da aplicação e a passar parâmetros para as rotas.

Instalação e configuração básica

Note

Faremos todos os código na continuação do projeto que já estamos desenvolvendo com o carrinho de compras da livraria. Poderíamos ter feito a criação do projeto já com o Vue-Router

Para instalar o Vue Router em um projeto VueJS, você pode usar o seguinte comando:

npm install vue-router@4

Após a instalação, você pode configurar o Vue Router no seu projeto. Para isso, crie um arquivo chamado index.js na pasta src/router (1) do seu projeto e adicione o seguinte código:

  1. 🙋‍♂️ Crie a pasta src/router caso ela não exista.
./src/router/index.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
import { createRouter, createWebHistory } from 'vue-router';

const routes = [];

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

export default router;

Nesse código, estamos importando as funções createRouter e createWebHistory do Vue Router. Em seguida, definimos um array routes que será usado para armazenar as rotas da nossa aplicação. Por enquanto, deixamos esse array vazio. Depois disso, criamos uma instância do roteador usando a função createRouter, passando o histórico de navegação e as rotas definidas. Por fim, exportamos o roteador para que possamos usá-lo em outros arquivos.

Agora, precisamos importar o roteador no arquivo principal da nossa aplicação, que é o arquivo main.js. Abra esse arquivo e adicione o seguinte código:

./src/main.js
1
2
3
4
5
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

Nesse código, estamos importando o roteador que acabamos de criar e usando o método use para registrá-lo na instância da aplicação Vue. Isso permite que o Vue Router gerencie as rotas da nossa aplicação.

Criando a página principal

Agora que configuramos o Vue Router, podemos começar a definir as rotas da nossa aplicação. Inicialmente, vamos criar um componente que será a página principal da nossa aplicação. Crie um arquivo chamado HomeView.vue na pasta src/views (1) do seu projeto e adicione o seguinte código:

  1. 🙋‍♂️ Crie a pasta src/views caso ela não exista.
./src/views/HomeView.vue
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<script setup>
import { ref } from 'vue';
import FeaturedComponent from '@/components/FeaturedComponent.vue';
import HeroBanner from '@/components/HeroBanner.vue';
import CartComponent from '@/components/CartComponent.vue';
import BooksListing from '@/components/BooksListing.vue';

const showCart = ref(false);
const cart = ref({
  items: [],
  total: 0,
});
const books = [
  {
    id: 1,
    title: 'Comigo na livraria',
    cover: '/covers/comigo-na-livraria.png',
    price: 23.24,
    author: 'Martha Medeiros',
  },
  {
    id: 2,
    title: 'Quincas Borba',
    cover: '/covers/quincas-borba.png',
    price: 23.24,
    author: 'Machado de Assis',
  },
  {
    id: 3,
    title: 'A livraria',
    cover: '/covers/a-livraria.png',
    price: 13.94,
    author: 'Penelope Fitzgerald',
  },
  {
    id: 4,
    title: 'A hora da estrela',
    cover: '/covers/a-hora-da-estrela.png',
    price: 16.84,
    author: 'Clarice Lispector',
  },
  {
    id: 5,
    title: 'O alienista',
    cover: '/covers/o-alienista.png',
    price: 266.92,
    author: 'Machado de Assis',
  },
  {
    id: 6,
    title: 'Mar morto',
    cover: '/covers/mar-morto.png',
    price: 13.95,
    author: 'Jorge Amado',
  },
  {
    id: 7,
    title: 'Grande sertão',
    cover: '/covers/grande-sertao-veredas.png',
    price: 26.04,
    author: 'Guimarães Rosa',
  },
  {
    id: 8,
    title: 'Flor de poemas',
    cover: '/covers/flor-de-poema.png',
    price: 15.81,
    author: 'Cecília Meireles',
  },
];

function decrementBookToCart(book) {
  const existingBook = cart.value.items.find((item) => item.id === book.id);
  if (existingBook.quantity === 1) {
    cart.value.items = cart.value.items.filter((item) => item.id !== book.id);
  } else {
    existingBook.quantity--;
  }
  cart.value.total -= book.price;
}

function incrementBookToCart(book) {
  const existingBook = cart.value.items.find((item) => item.id === book.id);
  existingBook.quantity++;
  cart.value.total += book.price;
}

function addToCart(book) {
  const existingBook = cart.value.items.find((item) => item.id === book.id);
  if (existingBook) {
    existingBook.quantity++;
  } else {
    cart.value.items.push({ ...book, quantity: 1 });
  }
  cart.value.total += book.price;
  alert(`Adicionado ${book.title} ao carrinho!`);
}
</script>

<template>
  <CartComponent
    v-if="showCart"
    :cart="cart"
    @hide-cart="showCart = false"
    @increment-book="incrementBookToCart"
    @decrement-book="decrementBookToCart"
  />
  <template v-else>
    <button @click="showCart = true">Ir para carrinho</button>>
    <HeroBanner />
    <FeaturedComponent />
    <BooksListing :books="books" @add-to-cart="addToCart" />
  </template>
</template>

Note que praticamente copiamos o código do componente App.vue que já havíamos criado anteriormente. A diferença é que agora estamos usando o Vue Router para gerenciar as rotas da nossa aplicação. O componente HomeView.vue será a página principal da nossa aplicação e será exibido quando o usuário acessar a rota /. Também não precisamos importar o componente HeaderComponent e FooterComponent, pois eles serão parte do layout da nossa aplicação e ficarão fora do componente HomeView.vue.

Ainda, criamos um botão que, quando clicado, exibe o carrinho de compras. O carrinho de compras é um componente separado que será exibido quando o usuário clicar no botão "Ir para carrinho". Note que tivemos que fazer isso pois a funcionalidade de abrir o carrinho a partir do HeaderComponent não estará disponível, já que não estamos mais usando o App.vue como componente raiz. Isso será resolvido mais adiante, em outros conceitos que vamos adquirir.

Criando uma página para a equipe

Vamos também criar um componente que terá as informações da equipe de desenvolvimento. Crie um arquivo chamado TeamView.vue na pasta src/views do seu projeto e adicione o seguinte código:

./src/views/TeamView.vue
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<template>
  <div>
    <h1>Equipe de Desenvolvimento</h1>
    <ul>
      <li>Desenvolvedor 1</li>
      <li>Desenvolvedor 2</li>
      <li>Desenvolvedor 3</li>
    </ul>
  </div>
</template>

Configurando as rotas

Agora que temos os componentes HomeView.vue e TeamView.vue, podemos configurar as rotas da nossa aplicação. Abra o arquivo src/router/index.js e adicione as seguintes rotas:

./src/router/index.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '@/views/HomeView.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: HomeView,
  },
  {
    path: '/equipe',
    name: 'Team',
    component: () => import('@/views/TeamView.vue'),
  },
];

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

export default router;

Note que usamos duas formas de importar os componentes. Para a rota da página inicial, importamos o componente HomeView diretamente. Já para a rota da equipe, usamos uma importação assíncrona. Você pode usar essa abordagem para carregar componentes sob demanda, o que pode melhorar o desempenho da sua aplicação, especialmente se você tiver muitos componentes ou páginas.

Agora que temos as rotas configuradas, precisamos usar os componentes <RouterLink /> e <RouterView /> do Vue Router para navegar entre as páginas da nossa aplicação.

O comando RouterView é usado para renderizar o componente correspondente à rota atual. Ele deve ser usado no componente raiz da sua aplicação, geralmente no arquivo App.vue. O Vue Router irá renderizar o componente correspondente à rota atual dentro do <RouterView />.

O comando RouterLink é usado para criar links que, quando clicados, navegam para a rota especificada. Ele deve ser usado dentro do componente <template /> para criar links de navegação entre as páginas da sua aplicação. O Vue Router irá interceptar os cliques nos links criados com <RouterLink /> e navegar para a rota especificada, sem recarregar a página.

Vamos ajustar o nosso projeto para usar esses componentes.

Ajustando o arquivo App.vue

Agora, precisamos ajustar o arquivo App.vue para usar o Vue Router e exibir as rotas corretamente. Abra o arquivo src/App.vue e substitua o conteúdo pelo seguinte:

./src/App.vue
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<script setup>
import HeaderComponent from './components/HeaderComponent.vue';
import FooterComponent from '@/components/FooterComponent.vue';
</script>

<template>
  <HeaderComponent @click-cart="showCart = !showCart" />
  <main>
    <RouterView />
  </main>
  <footer-component />
</template>

<style scoped></style>

Nesse código, estamos importando o componente HeaderComponent e FooterComponent, e usando o componente <RouterView /> para renderizar as rotas definidas no Vue Router. O <RouterView /> é um componente especial do Vue Router que renderiza o componente correspondente à rota atual.

Dessa forma, no local onde está definido o componente <RouterView>, o Vue Router irá renderizar o componente correspondente à rota atual. Por exemplo, se o usuário acessar a rota /, o componente HomeView será exibido. Se o usuário acessar a rota /equipe, o componente TeamView será exibido.

Para navegar entre as páginas da nossa aplicação, podemos usar o componente <RouterLink /> do Vue Router. Esse componente permite criar links que, quando clicados, navegam para a rota especificada.

Abra o arquivo src/components/HeaderComponent.vue e altere o bloco de template para o seguinte código:

./src/components/HeaderComponent.vue
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<template>
  <header>
    <nav>
      <h1>
        <RouterLink to="/">
          IFbooks
          <span class="logo-title"> Apreço a livros </span>
        </RouterLink>
      </h1>
      <div class="search-wrapper">
        <input type="text" class="search" placeholder="Buscar..." />
      </div>
      <ul>
        <li>Termos</li>
        <li><RouterLink to="/equipe">Equipe</RouterLink></li>
        <li>Envio</li>
        <li>Devoluções</li>
      </ul>
      <ul class="icons">
        <li @click="$emit('click-cart')"><span class="mdi mdi-cart"></span></li>
        <li><span class="mdi mdi-heart"></span></li>
        <li><span class="mdi mdi-account"></span></li>
      </ul>
    </nav>
  </header>
</template>

Note as alterações que fizemos nas linhas destacadas (linhas 9 a 12 e linha 19). A versão completa do arquivo HeaderComponent.vue está no bloco abaixo.

👁👁 Versão completa
./src/components/HeaderComponent.vue
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
<script setup>
    defineEmits(['click-cart'])
</script>

<template>
    <header>
        <nav>
            <h1>
                <RouterLink to="/">
                    IFbooks
                    <span class="logo-title"> Apreço a livros </span>
                </RouterLink>
            </h1>
            <div class="search-wrapper">
            <input type="text" class="search" placeholder="Buscar..." />
            </div>
            <ul>
                <li>Termos</li>
                <li><RouterLink to="/equipe">Equipe</RouterLink></li>
                <li>Envio</li>
                <li>Devoluções</li>
            </ul>
            <ul class="icons">
                <li @click="$emit('click-cart')"><span class="mdi mdi-cart"></span></li>
                <li><span class="mdi mdi-heart"></span></li>
                <li><span class="mdi mdi-account"></span></li>
            </ul>
        </nav>
    </header>
</template>

<style scoped>
    header nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 2vh 8vw;
        border-bottom: 2px solid #27ae6099;

        & a {
            text-decoration: none;
            color: rgb(44, 62, 80);
        }

        & h1 {
            font-size: 1.3rem;
            color: #000;

            & a {
            text-decoration: none;
            color: #000;
            display: flex;
            align-items: center;
            }

            & .logo-title {
            border-left: 1px solid #27ae6099;
            font-size: 0.8rem;
            margin-left: 10px;
            padding-left: 10px;
            color: #27ae6099;
            width: 100px;
            line-height: 1rem;
            }
        }

        & input {
            width: 400px;
            height: 40px;
            border-radius: 5px;
            font-size: 1rem;
            border: 0;
            background-color: #f1f1f1;
            padding: 5px;
        }

        & ul {
            display: flex;
        }

        & ul li {
            list-style: none;
            margin: 0 10px;
            font-size: 1rem;
        }

        & .icons li {
            color: #27ae60;
            font-size: 1.3rem;
        }

        & .search-wrapper {
            position: relative;
        }

        & .search-wrapper::before {
            content: '󰍉'; /* Code glyph para mdi-magnify */
            font-family: 'Material Design Icons';
            font-size: 1.2rem;
            position: absolute;
            right: 0.75rem;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
        }

        & .search {
            padding-right: 2rem;
        }
 }
</style>

Agora a nossa aplicação está pronta para ser testada.

Rotas dinâmicas

Agora, vamos aprender como criar rotas dinâmicas no Vue Router. As rotas dinâmicas são úteis quando precisamos exibir conteúdo baseado em parâmetros que podem variar, como IDs de usuários, nomes de produtos, etc.

Definindo rotas dinâmicas

Para definir uma rota dinâmica, usamos dois pontos (:) antes do nome do parâmetro na definição da rota. Para exemplificar, no exemplo da nossa livraria, vamos fazer uma rota que exibe detalhes de um livro específico. A rota pode ser definida da seguinte forma, inserindo mais uma rota na variável routes, no arquivo src/router/index.js:

Cuidado

Note que nos exemplos, em geral, estamos sempre alterando alguma variável já existente. Cuide para não sobrescrever variáveis importantes e nem redefinir variáveis que já existem nos exemplos anteriores.

src/router/index.js
16
17
18
19
20
21
22
  {
    path: '/livro/:id',
    name: 'Book',
    component: () => import('@/views/BookView.vue'),
    props: true,
  },
];

Nossa versão completa do arquivo src/router/index.js ficaria assim:

👁👁 Versão completa
src/router/index.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import { createRouter, createWebHistory } from 'vue-router'

import HomeView from '@/views/HomeView.vue'

const routes = [
    {
        path: '/',
        name: 'Home',
        component: HomeView,
    },
    {
        path: '/equipe',
        name: 'Team',
        component: () => import('@/views/TeamView.vue'),
    },
    {
        path: '/livro/:id',
        name: 'Book',
        component: () => import('@/views/BookView.vue'),
        props: true,
    },
]

const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes,
})

export default router

Note que a rota /livro/:id define um parâmetro dinâmico chamado id. Isso significa que quando o usuário acessar uma URL como /livro/123, o Vue Router irá capturar o valor 123 e passá-lo para o componente associado à rota. Também, definimos a propriedade props: true, que permite que o parâmetro seja passado como uma propriedade para o componente. Por fim, o componente associado à rota é o BookView.vue, que será responsável por exibir os detalhes do livro.

Criando o componente para a rota dinâmica

Agora, precisamos criar o componente BookView.vue que irá exibir os detalhes do livro. Crie um novo arquivo chamado BookView.vue na pasta src/views/. O conteúdo do arquivo pode ser algo como:

src/views/BookView.vue
<script setup>
defineProps(['id']);
</script>

<template>
  <h1>Detalhes do livro: {{ id }}</h1>
</template>

Note que estamos usando a diretiva defineProps para receber o parâmetro id passado pela rota. No template, exibimos o ID do livro. Este é um exemplo simples, mas você pode expandir esse componente para buscar informações de um livro específico em uma API ou em um banco de dados, por exemplo.

Agora, se você quiser testar a rota dinâmica, você pode acessar a URL /livro/123 (ou qualquer outro ID) e verá o componente BookView.vue renderizando o ID do livro.

No sequência, vamos integrar isso com a listagem de livros que criamos anteriormente, para que possamos clicar em um livro e ser redirecionado para a página de detalhes desse livro.

Rotas programáticas

Até então, vimos como navegar entre as rotas utilizando o componente <RouterLink />. No entanto, em alguns casos, pode ser necessário realizar a navegação de forma programática, ou seja, sem a interação direta do usuário. Isso pode ser útil em situações como:

  • Redirecionamento após uma ação do usuário (por exemplo, após o envio de um formulário).
  • Navegação com base em uma lógica de negócio (por exemplo, após a autenticação do usuário).
  • Navegação com base em eventos externos (por exemplo, após a conclusão de uma requisição assíncrona).

Dessa forma, além de usar os componentes <RouterLink /> e <RouterView />, também podemos navegar entre as rotas programaticamente usando a instância do roteador. Para isso, podemos usar o método router.push() para navegar para uma nova rota.

Vamos ver como realizar a navegação programática entre rotas no Vue Router.

Ajustando o componente de listagem de livros

Para demonstrar a navegação programática, vamos ajustar o componente de listagem de livros que criamos anteriormente. Vamos adicionar um evento de clique em cada livro que redireciona o usuário para a página de detalhes do livro selecionado. Vamos modificar o componente BookListing.vue para incluir a navegação programática.

Primeiro, vamos inserir uma função para fazer a rota programática. No arquivo src/components/BookListing.vue, adicione o seguinte código, no bloco <script setup>:

./src/components/BookListing.vue
4
5
6
7
8
9
import { useRouter } from 'vue-router';
const router = useRouter();

function openBook(id) {
  router.push({ name: 'Book', params: { id } });
}

Agora, no bloco <template>, vamos adicionar um evento de clique no elemento que representa cada livro. No exemplo, farei isso na tag <img>, mas poderíamos fazer em qualquer outro local ou elemento. Modifique o código para incluir o evento @click que chama a função openBook:

src/components/BookListing.vue
15
<img :src="book.cover" :alt="book.title" @click="openBook(book.id)" />

Para confirmar, a versão completa do arquivo src/components/BookListing.vue ficará assim:

👁👁 Versão completa
./src/components/BookListing.vue
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<script setup>
    defineEmits(['add-to-cart'])
    defineProps(['books'])
    import { useRouter } from 'vue-router'
    const router = useRouter()

    function openBook(id) {
        router.push({ name: 'Book', params: { id } })
    }
</script>

<template>
    <section class="books">
        <article class="book" v-for="book in books" :key="book.id">
            <img :src="book.cover" :alt="book.title" @click="openBook(book.id)" />
            <h2>{{ book.title }}</h2>
            <p class="book-author">{{ book.author }}</p>
            <span class="price-and-like">
                <p class="book-price">R$ {{ book.price.toFixed(2) }}</p>
                <span class="mdi mdi-heart-outline"></span>
            </span>
            <button @click="$emit('add-to-cart', book)"><span class="mdi mdi-cart"></span>Comprar</button>
        </article>
    </section>
</template>

<style scoped>
.books {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    padding: 5vh 8vw;

    & .book {
        display: flex;
        flex-direction: column;
        min-width: 300px;
        width: calc(100% / 4 - 42px);
        margin: 20px;

        & h2 {
            font-size: 1.5rem;
            font-weight: 700;
        }

        & .book-author {
            font-size: 1rem;
        }

        & .book-price {
            font-size: 1.2rem;
            font-weight: 700;
        }

        & .price-and-like {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;

            & .mdi-heart-outline {
                font-size: 1.3rem;
                color: #27ae60;
            }
        }
    }
}
</style>

Agora, quando o usuário clicar em um livro, ele será redirecionado para a página de detalhes do livro correspondente, utilizando a navegação programática.