Como funciona?

O Vue Router permite que você defina rotas para sua aplicação e gerencie como os usuários navegam entre elas.

Neste artigo, vamos mostrar como implementar rotas com o Vue Router em um aplicativo Vue.js.

Antes de começar, é importante ter um entendimento básico de como funciona o Vue.js e seus componentes.

Se você ainda não tem esse conhecimento, é recomendado se familiarizar com os conceitos básicos antes de prosseguir.

Instalação

Para começar, você precisará instalar o Vue Router em seu projeto. Isso pode ser feito usando npm ou yarn:

npm install vue-router

ou

yarn add vue-router

Depois de instalado, você precisará importá-lo em seu arquivo principal de JavaScript (geralmente chamado de main.js ou index.js) e registrá-lo como um plugin Vue:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

Definindo Rotas

Agora que o Vue Router está instalado e registrado como um plugin, você pode começar a definir suas rotas.

Isso é feito criando uma instância do VueRouter e passando suas rotas como um array de objetos.

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/contact', component: Contact }
  ]
})

Cada objeto de rota deve ter pelo menos dois atributos: path e component.

O path é a string da URL que a rota corresponde e o component é o componente Vue que será renderizado quando a rota for acessada.

Em seguida, você precisará vincular o router a sua instância Vue principal, passando-o como o objeto de opção router.

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

Além disso, você precisará adicionar o componente <router-view> ao seu template para que o Vue Router possa renderizar o componente correspondente à rota atual.

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

Navegação

Agora que as rotas foram definidas e vinculadas ao seu aplicativo, você pode usar o componente <router-link> para criar links que navegam entre as rotas.

O componente <router-link> é semelhante ao elemento <a> tradicional, mas ele usa o atributo to em vez de href para especificar a rota para a qual o link deve levar.

<template>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-link to="/contact">Contact</router-link>
    <router-view></router-view>
  </div>
</template>

Você também pode programaticamente navegar entre as rotas usando a instância do router.

Isso pode ser feito usando o método router.push() ou router.replace().

O método push() adiciona uma nova entrada ao histórico do navegador, enquanto o replace() substitui a entrada atual.

Ambos os métodos aceitam um objeto de rota ou uma string de caminho como parâmetro.

// Usando um objeto de rota
this.$router.push({ path: '/about' })

// Usando uma string de caminho
this.$router.push('/about')

Além disso, você pode acessar informações sobre a rota atual, como o caminho e os parâmetros de rota, através de objetos especiais fornecidos pelo Vue Router.

console.log(this.$route.path) // Exibe o caminho da rota atual
console.log(this.$route.params) // Exibe os parâmetros de rota

Conclusão

O Vue Router é uma ferramenta poderosa para gerenciar as rotas em seus aplicativos Vue.js.

Ele permite que você defina rotas e gerencie como os usuários navegam entre elas, além de fornecer recursos para navegação programática e acesso às informações da rota atual.

Com essas informações, você pode implementar facilmente o gerenciamento de rotas em seus próprios aplicativos Vue.js.