100 Dias de Vue, dia #07

100 Dias de Vue, dia #07

Alô, gente! Para fechar essa primeira semana dos 100 dias de Vue, hoje vou falar um pouco sobre algumas mudanças no uso do Vue Router dentro da função setup.

Usando o Route e o Router dentro da função Setup

A utilização do Vue Router não mudou muito na versão 3 do Vue, as mudanças ocorreram principalmente quando precisamos utilizar o router e o route dentro da função Setup. Isso se deve ao fato de que dentro da função, nos não temos mais acesso ao this, portanto não podemos mais acessar as instâncias do route e do router utilizando this.$router ou this.$route. Assim como outras funções que utilizamos anteriormente, para podermos utilizá-los, devemos importar de dentro do vue-router os hooks useRouter() e useRoute(). Aqui vale fazer uma diferenciação entre os dois para que não fiquem dúvidas:

  • O Router nos permite promover a navegação do usuário programaticamente, em ações como o push, go, replace e afins.
  • Já o Route, é uma instância da nossa rota que permite que visualizemos os parâmetros da rota que estamos, queries, o path e etc. Abaixo podemos ver quais métodos e propriedade cada um possui.

image.png

Bora dar uma olhada num exemplo em código da utilização de cada um:

image.png

  • Nesse primeiro exemplo, nos queremos programaticamente mandar o usuário para a página about quando ele clicar no botão, para fazer isso, instanciamos o useRouter e utilizamos o método push para enviar o usuário para página about.

image.png

  • Já nesse segundo caso, queremos verificar qual é o path completo da rota que estamos, se possuímos algum parâmetro ou alguma query. Para fazermos isso, devemos primeiramente instanciar o route numa variável e assim que entrarmos na nossa página, teremos acesso a essas informações.

Finalizando

Fechando essa primeira semana, esse assunto é de suma importância pra quem desenvolve com o Vue no dia-a-dia.