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

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.