Configuração de rotas e links com Vue Router no Vue.js

Este artigo dá continuidade à introdução sobre o sistema de roteamento no Vue 3. Caso ainda não tenha lido o conteúdo anterior, é recomendável revisá-lo antes de prosseguir. Nele, são explicados os conceitos fundamentais do roteador do Vue, como a definição das rotas e a configuração da aplicação com VueRouter. Além disso, foi demonstrado como executar o projeto em um servidor local, algo essencial para o funcionamento correto do roteamento.

Neste ponto, o foco está na criação de links de navegação usando o componente router-link, que permite navegar entre rotas sem recarregar a página.

A seguir está um exemplo prático de como criar links para as rotas definidas:

<!DOCTYPE html>
<html>
  <head>
    <title>Roteamento no Vue 3</title>
    <meta charset="utf-8" />
    <style>
      ul {
        list-style-type: none;
        padding: 0;
      }
      li {
        display: inline-block;
      }
      a {
        padding: 5px;
      }
      a.router-link-active,
      li.router-link-active > a {
        color: red;
      }
    </style>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/vue-router"></script>
  </head>
  <body>
    <div id="app">
      <ul>
        <li><router-link to="/">Home</router-link></li>
        <li><router-link to="/products">Products</router-link></li>
        <li><router-link to="/about">About</router-link></li>
      </ul>
      <router-view></router-view>
    </div>

    <script>
      const Home = { template: "<h2>Home Page</h2>" };
      const Products = { template: "<h2>Products Page</h2>" };
      const About = { template: "<h2>About Page</h2>" };

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

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

      const app = Vue.createApp({});
      app.use(router);
      app.mount("#app");
    </script>
  </body>
</html>

Esse exemplo expande o projeto anterior, adicionando um menu de navegação com três links: Home, Products e About. Os links são criados com o componente router-link, que recebe a rota como valor da propriedade to. Quando o usuário clica em um desses links, o componente correspondente à rota é renderizado dentro de router-view.

Por padrão, o Vue Router aplica a classe router-link-active ao link correspondente à rota atual. Isso permite destacar visualmente o item ativo com regras de estilo. No exemplo acima, essa classe aplica a cor vermelha ao link selecionado.

Uso de router-link em uma aplicação Vue.js

Para personalizar o nome da classe associada ao link ativo, pode-se usar a propriedade active-class. O exemplo abaixo mostra como substituir a classe padrão por uma chamada active:

<style>
  .active {
    color: green;
  }
</style>

<ul>
  <li><router-link to="/" active-class="active">Home</router-link></li>
  <li><router-link to="/products" active-class="active">Products</router-link></li>
  <li><router-link to="/about" active-class="active">About</router-link></li>
</ul>

Esse comportamento oferece mais controle sobre a aparência da navegação, permitindo a aplicação de estilos específicos ao link correspondente à rota ativa.

ℹ️ Importante: como mencionado no tema anterior, o roteamento não funciona ao abrir o arquivo HTML diretamente no navegador. É necessário executar a aplicação em um servidor local. Consulte o tema de introdução sobre o sistema de roteamento no Vue 3 para saber como configurar um servidor com Node.js ou outra solução compatível.

Resumo

O componente router-link é usado para criar links de navegação.
A propriedade to define a rota associada ao link.
O Vue Router aplica automaticamente a classe router-link-active ao link da rota atual.
É possível personalizar o nome da classe ativa usando a propriedade active-class.