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 nele crie um arquivo chamado index.js, dentro dele ficará a nossa configuração.
Primeiro, devemos importar as dependências do Vue e do Vue-Router. Depois disso, precisamos 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.
