Parâmetros de Rotas no Vue.js

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.

Exemplo de rotas com parâmetro único

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.