Vue Router: Configuração de Rotas e Navegação Programática

O Vue Router é a solução oficial para gerenciamento de rotas em aplicações Vue.js. Ele permite a criação de páginas de navegação em SPA (Single Page Applications) com comportamentos semelhantes aos de uma aplicação multi-página, gerenciando as transições entre as diferentes vistas sem necessidade de recarregar a página. Vamos explorar a configuração de rotas e a navegação programática com o Vue Router.

Configuração de Rotas

Para usar o Vue Router, como instalar o pacote via NPM ou Yarn e configurar as rotas da aplicação. Cada rota mapeia um caminho URL a um componente, que é exibido quando o usuário navega para aquele caminho.

Instalação:

npm install vue-router@4

Configuração básica:

import { createRouter, createWebHashHistory } from "vue-router";

const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  // Definir as rotas
  routes: [
    {
      path: "/",
      name: "home",
      component: () => import("./components/Home.vue"),
    },
    {
      path: "/about",
      name: "about",
      component: () => import("./components/About.vue"),
    },
  ],
});

export default router;

import { createApp } from "vue";
// Importa a instância do Vue Router
import router from "./router";

// Criar e montar a instância root
const app = createApp(App);
app.use(router);

app.mount("#app");

Neste exemplo, a aplicação tem duas rotas: uma para a página inicial (Home) e outra para a página sobre (About). O modo history remove o hash (#) das URLs, utilizando a History API do HTML5 para criar URLs amigáveis.

Navegação Programática

Além de navegar clicando em links, o Vue Router permite mudar de rotas programaticamente, ou seja, através do código JavaScript. Isso é útil em situações onde a navegação deve ocorrer como resultado de alguma lógica de aplicação, como um login bem-sucedido ou a finalização de um formulário.

Exemplo de navegação programática:

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

const router = useRouter();
const goToHome = () => router.push("/");
const goToAbout = () => router.push("/about");
const goBack = () => router.go(-1);
</script>

O método push é usado para navegar para uma nova URL. Ele aceita tanto uma string representando o path quanto um objeto de rota. O método go é usado para navegar para frente ou para trás no histórico do navegador, similarmente aos botões de avançar e voltar do navegador.

Conclusão

O Vue Router é uma ferramenta poderosa e essencial para desenvolver SPAs com Vue.js. Ele não apenas oferece uma maneira de definir e gerenciar rotas de maneira declarativa, mas também permite controlar a navegação programática, dando flexibilidade para manipular a experiência do usuário de acordo com as necessidades da aplicação.