Como funciona e como configurar o Vue-Router

Para se construir uma Single Page Application, um dos componentes essenciais é o Router, e no caso do Vue seria o Vue-Router. Ele faz todo o gerenciamento de qual conteúdo deve ser mostrado na tela com base na url que o usuário está acessando, e esse controle se for bem montado, da uma dinâmica grande para a aplicação, tornando melhor a experiência do usuário, a navegação no sistema e entre outros benefícios.

Instalação

Para realizar a instalação, utilize o gerenciador de pacote do seu projeto e rode o comando abaixo:

NPM:

npm install vue-router

Yarn:

yarn add vue-router

Configuração

Depois de instalado, eu acho uma boa pratica, realizar a configuração do vue-router em um arquivo separado, porque esse arquivo dependendo do tamanho do sistema, pode crescer bastante, além de que toda a responsabilidade pelos dados do roteamento, ficarão somente dentro dele. Para isso, crie um diretório dentro de src chamado router, e dentro dele crie um arquivo chamado index.js, abra ele e nesse arquivo ficará a nossa configuração.

Primeiro, deveremos importar as dependências do Vue e do Vue-Router, depois disso, devemos importar o(s) componente(s) que serão utilizados para serem acessados diretamente pela rota, isso deverá ser feito com todos os componentes principais de cada funcionalidade, e posterior a isso vamos dizer para o Vue usar o Router, inicialmente o index.js vai ficar dessa forma:

import Vue from 'vue'
import VueRouter from 'vue-router'
import MeuComponente1 from '../views/MeuComponente1.vue'
import MeuComponente2 from '../views/MeuComponente2.vue'
Vue.use(VueRouter)

Depois disso, precisamos configurar a constante que irá receber as rotas, nesse próximo passo, iremos colocar todas as rotas do sistema, e sempre que fizer uma nova funcionalidade, pode adicionar mais um elemento nessa variável para configurar uma rota para o seu acesso. A constante será um array de objetos, sendo que em cada objeto tem a configuração das rotas, basicamente precisa-se de 3 argumentos, o path, o name e o component.

O path vai ser a url de acesso do sistema como por exemplo /meucomponente. O name é um identificador para a rota, para que dentro do sistema, você possa forçar uma navegação utilizando o nome da rota, por exemplo, em uma situação que você salva um dado, depois que você manda o comando para salvar, você pode trocar de tela fazendo this.$router.push({ name: ‘nomeDaRota’ }). O component é o componente que vai ser renderizado, e deve ser previamente importado nesse arquivo. Então, a configuração da constante, fica dessa maneira:

const routes = [
  {
    path: '/meucomponente1',
    name: 'meucomponente1',
    component: MeuComponente1
  },
  {
    path: '/meucomponente2',
    name: 'meucomponente2',
    component: MeuComponente2
  }
]

Certo, agora já temos a constante configurada mapeando as rotas e os componentes, agora precisamos criar a instância do Vue-Router com as configurações e registrando as rotas que colocamos na constante. Na criação da instância, tem alguns argumentos que são passados, eu coloco basicamente 3, o mode, o base e a constante das rotas.

O mode, é o modo de navegação que o Vue irá utilizar, e são dois possíveis, o history e o hash, basicamente falando o hash ele vai colocar um # na frente da url base e vai navegar até o componente, particularmente não gosto de usar esse modo, o outro que é o que eu utilizo é o history, é mais fácil de se trabalhar e também de manter um histórico de navegação, por exemplo, caso queira voltar na página anterior que o usuário acessou, da pra fazer de forma mais fácil. O base, será a base_url do nosso sistema, então a gente configurou na constante somente o /meucomponente1, esse atributo base é o que vem antes dessa barra do componente, então iremos definir ela como http://localhost:8080. E por fim a gente somente utiliza a constante de rotas que já está configurada, essa configuração deve ficar dessa forma:

const router = new VueRouter({
mode: 'history',
base: 'http://localhost:8080',
routes
})
export default router

E o arquivo completo ficou dessa maneira:

import Vue from 'vue'
import VueRouter from 'vue-router'
import MeuComponente1 from '../views/MeuComponente1.vue'
import MeuComponente2 from '../views/MeuComponente2.vue'
Vue.use(VueRouter)
const routes = [
  {
    path: '/meucomponente1',
    name: 'meucomponente1',
    component: MeuComponente1
  },
  {
    path: '/meucomponente2',
    name: 'meucomponente2',
    component: MeuComponente2
  }
]
const router = new VueRouter({
    mode: 'history',
    base: 'http://localhost:8080',
    routes
})
export default router

Pronto, agora, devemos importar as configurações do Vue-Router, dentro do main.js para que tudo seja aplicado e funcione corretamente, para isso, realize a importação das configurações e coloque na criação da instancia do Vue, dessa forma:

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

Depois de configurado e importado, precisamos criar o menu e configurar onde será mostrado cada componente, vamos abrir o App.vue e configurar lá dentro. Para o menu iremos configurar um router-link e para a renderização, precisamos colocar a tag router-view, nesse artigo não irei abordar nenhuma parte de estilos, porém o router-link é um menu que você pode estilizar da forma que preferir e em qualquer framework css, nosso caso aqui, o menu vai ficar da seguinte maneira:

<router-link to="/meucomponente1">
<router-link to="/meucomponente2">

e abaixo dele colocamos a view para renderizar os componentes

<router-view></router-view>

Conclusão

Agora todo o arquivo com as configurações do Vue-Router foi configurado e inicializado, além de criar o menu e configurar a navegação na tela, caso você acesse http://localhost:8080/meucomponente1, o sistema irá renderizar este componente, e se clicar no link para navegar até o componente 2, o vue irá renderizar este componente fazendo a navegação.