Parâmetros de Rotas no Vue 3

O sistema de roteamento do Vue 3 permite definir parâmetros dinâmicos nas rotas, o que possibilita o envio de informações diretamente pela URL. Para isso, basta incluir dois-pontos antes do nome do parâmetro na definição da rota.

Por exemplo:

{ path: '/products/:id', component: Products }

Nesse caso, id é um parâmetro. A rota aceitará URLs como:

/products/6-tom
/products/21
/products/phones

Tudo o que aparece após /products/ será interpretado como valor do parâmetro id.

No componente, os valores dos parâmetros ficam disponíveis por meio do objeto $route.params. Para acessar o valor de id, basta usar this.$route.params.id ou {{ $route.params.id }} dentro do template.

O exemplo abaixo mostra como usar parâmetros de rota:

<!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/1">Product 1</router-link></li>
        <li><router-link to="/products/2">Product 2</router-link></li>
    </ul>
    <router-view></router-view>
    </div>
    <script>
        const Home = { template: '<h2>Home Page</h2>' }
        const Products = { template: '<h2>Product {{ $route.params.id }}</h2>' }

        const routes = [
            { path: '/', component: Home },
            { path: '/products/:id', component: Products }
        ];

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

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

Neste exemplo, o valor que aparece após /products/ na URL é capturado como parâmetro id e exibido na página.

Importante: 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.

Múltiplos parâmetros

Também é possível definir rotas com mais de um parâmetro. No exemplo a seguir, os parâmetros são category e id.

<li><router-link to="/products/tablets/2">Tablet 2</router-link></li>
<li><router-link to="/products/phones/3">Phone 3</router-link></li>

A definição da rota correspondente é:

{ path: '/products/:category/:id', component: Products }

E o componente pode exibir os dados recebidos assim:

const Products = {
template: `
    <div>
    <h2>Product</h2>
    <h3>Category: {{ $route.params.category }}</h3>
    <h3>Id: {{ $route.params.id }}</h3>
    </div>
`
}

Exemplo de rotas com múltiplos parâmetros

Parâmetros opcionais

Parâmetros também podem ser definidos como opcionais. Para isso, adiciona-se ? ao final do nome:

{ path: '/products/:id?', component: Products }

Essa rota aceita tanto /products quanto /products/3. O componente pode tratar os dois casos:

const Products = {
template: `
    <div>
    <h2 v-if="$route.params.id">Produto {{ $route.params.id }}</h2>
    <h2 v-else>Lista de produtos</h2>
    </div>
`
}

Exemplo de rotas com parâmetros opcionais

Expressões regulares nos parâmetros

O Vue Router permite restringir o formato de um parâmetro com expressões regulares. Por exemplo, para aceitar apenas números como id:

{ path: '/products/:id(\\d+)', component: Products }

Também é possível combinar a restrição com a opção de ser um parâmetro opcional:

{ path: '/products/:id(\\d+)?', component: Products }

Essas expressões tornam as rotas mais seguras e precisas, controlando os formatos aceitos diretamente na configuração.

Resumo

Parâmetros são definidos com dois-pontos na rota, como :id.
Os valores dos parâmetros são acessíveis em $route.params.
É possível utilizar múltiplos parâmetros em uma mesma rota.
Parâmetros podem ser definidos como opcionais, adicionando-se ? ao final do nome.
Expressões regulares podem ser usadas para restringir o formato dos parâmetros.