Programação Web 2

Vue Router — Roteamento Client-Side

Prof. Me. Danilo Bueno

O que vamos ver hoje

1. O problema com <a href> numa SPA
2. Instalando e configurando o Vue Router
3. <RouterView> e <RouterLink>
4. Views — organizando as telas
5. useRouter() — navegação por código

<a href> destrói a aplicação

<!--  reload completo — estado Vue é destruído -->
<a href="/playlists/nova">Nova Playlist</a>

<!--  navega sem reload — estado permanece -->
<RouterLink to="/playlists/nova">Nova Playlist</RouterLink>

Clicar num <a href> faz o navegador recarregar a página.
Tudo que estava em memória — variáveis, ref, dados carregados — some.

Instalação

npm install vue-router

Criando as rotas

// src/router/index.js
import { createRouter, createWebHistory } from "vue-router";
import HomeView from "../views/HomeView.vue";
import NovaPlaylistView from "../views/NovaPlaylistView.vue";

const routes = [
  { path: "/", component: HomeView },
  { path: "/playlists/nova", component: NovaPlaylistView },
];

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

export default router;

Registrando no main.js

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

const app = createApp(App);
app.use(router); // antes do mount
app.mount("#app");

app.use(router) precisa vir antes de app.mount. Sem isso, <RouterView> e <RouterLink> não existem.

App.vue como casca de navegação

<!-- App.vue -->
<template>
  <nav>
    <RouterLink to="/">Início</RouterLink>
    <RouterLink to="/playlists/nova">Nova Playlist</RouterLink>
  </nav>

  <RouterView />
</template>

• <RouterView /> é onde o componente da rota ativa é renderizado
• Vue Router adiciona .router-link-active no link da rota atual

Views — uma tela, um arquivo

Cada view vive em src/views/ e é responsável pelos próprios dados.

<!-- src/views/HomeView.vue -->
<template>
  <ul>
    <li v-for="musica in musicas" :key="musica.id">{{ musica.titulo }}</li>
  </ul>
</template>

<script setup>
  import { ref, onMounted } from "vue";

  const musicas = ref([]);

  onMounted(async () => {
    const res = await fetch("https://api.exemplo.com/musicas");
    musicas.value = await res.json();
  });
</script>

Quando o usuário navega para /, o Vue monta HomeView e o onMounted dispara — dados buscados no momento certo.

useRouter() — navegar por código

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

  const router = useRouter();

  async function salvar(produto) {
    await fetch("https://api.exemplo.com/products", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(produto),
    });

    router.push("/"); // redireciona após salvar
  }
</script>

useRouter() para navegar. useRoute() para ler a rota atual (params, query).

Parâmetros de rota — useRoute()

// src/router/index.js
{ path: "/products/:id", component: ProdutoDetalheView }

<!-- src/views/ProdutoDetalheView.vue -->
<script setup>
  import { ref, onMounted } from "vue";
  import { useRoute } from "vue-router";

  const route = useRoute();
  const produto = ref(null);

  onMounted(async () => {
    const id = route.params.id;
    const res = await fetch(`https://api.exemplo.com/products/${id}`);
    produto.value = await res.json();
  });
</script>

Referência rápida

Obrigado!

Me. Danilo Bueno
danilocbueno.github.io