Rotas no Vue com vue-router – parte 2

Como passar um valor dinâmico

Nessa segunda parte do artigo vou mostrar como criar rotas com valores dinâmicos, porque até agora estou criando somente rotas exatas, como o '/' e '/about', mas e se eu quiser pegar um produto pelo id, onde claro esse id será dinâmico ?

É bem simples, veja só.

Quando eu quero chamar a rota '/product/12', você não concorda comigo que o 12 pode ser qualquer valor ?.Então nas rotas eu preciso colocar esse valor como dinâmico, ou seja, trabalhar com um placeholder.

Olha como fica a rota ‘/product/12' com um placeholder no 12.

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [
        {
            path: '/product/:id',
            component: Product
        }
    ]
});

O :id é o placeholder, isso significa que ali posso passar qualquer valor, e o :id pode ser qualquer nome, não precisa ser esse.

Agora posso passar '/product/12', '/product/geladeira'..etc…

Como eu pego o valor dinâmico no componente

Legal, agora você já sabe como passar um valor dinâmico para a rota, mas agora vem o problema, como eu pego esse valor dentro do meu componente, no caso no componente Product?

Dá só uma olhada no código abaixo.

<template>
  <h2>Product</h2> 
</template>

<script setup>
import { useRoute } from 'vue-router';

const route = useRoute();

console.log(route.params.id);
</script>

Primeiro tenho que importar o useRoute, e depois executar ele como uma função e atribuir para a constante route.

Agora com o route eu posso chamar o params(sim, tem que ser sempre params), e depois chamo o id, ficando route.params.id.

Se eu colocasse lá no placeholder '/product/:name', no route eu pegaria esse valor como route.params.name, deu para entender a idéia né ?

Criando link com um objeto

Olha só que legal, eu posso no router-link ao invés de passar como abaixo.

<router-link to="product/12">Product</router-link>,

Eu posso usar o v-bind passando para o to um objeto.

<router-link v-bind:to="{name:'product', params:{id:12}}">About</router-link> |

Aposto que você percebeu que no to passei um objeto, e reparou também que passei para esse objeto a propriedade name:'Product', mas o que significa esse name ?

Quando eu crio a rota eu posso passar para ela um nome.

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [
        {
            path: '/product/:id',
            name:'Product', // rota com um name, chamado no link
            component: Product
        }
    ]
});

Agora no link eu posso passar no objeto o name, que ele vai chamar justamente a rota com esse name, simples né ?

O params do objeto já é auto-explicativo, e eu pego ele no componente com route.params.nome-propriedade, e eu posso passar quantas propriedades eu quiser.

Passando e pegando uma QueryString

E se você quiser passar uma QueryString pelo link pode passar de duas maneiras, a primeira a mais tradicional.

<router-link to="/product/12?name=alexandre">Product</router-link>

E dentro do componente é só chamar através do route a propriedade query.

<template>
<h2>Product</h2>
</template>

<script setup>
import { useRoute } from 'vue-router';

const route = useRoute();

console.log(route.params, route.query); // route.query
</script>

A outra maneira de passar uma querystring é usar um objeto, assim como fiz com o params.

<router-link :to="{name:'product', params:{id:12}, query:{name:'Alexandre'}}">
   Product
</router-link>

E assim termina essa segunda parte desse artigo onde ensino a trabalhar com as rotas no Vue 3.

Se quiser conhecer meu trabalho mais a fundo, visite meu canal no YouTube e veja meus cursos completos clicando nos links abaixo.

🔥Canal no YouTube: Ir para o canal no YouTube
🔥Veja meus cursos disponíveis: Ir para a lista de cursos