7. Configurando Vue Router

Fala galera, nesse post vamos ver como configurar corretamente o Vue Router.

Primeiramente como vamos começar a trabalhar com o Vue, recomendo que instalem a extensão para o Chrome:

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=pt-BR

Configuração do Vue Router

Basicamente basta seguir a documentação:

https://router.vuejs.org/

Primeiro passo é executar o instalador:

npm install vue-router --save

E importar as dependências no app.js:

import VueRouter from 'vue-router'
Vue.use(VueRouter)

E declaramos nosso array utilizando o let (escopo de bloco), vamos utilizar o próprio exemplo do Laravel nesse primeiro momento:

let routes = [
    { path: '/example-component', component: require('./components/ExampleComponent.vue') }
]

E a instância router, onde são passadas as opções:

const router = new VueRouter({
    routes // short for `routes: routes`
})

Inicializando na const app:

const app = new Vue({
 el: '#app',
 router
});

Código fonte do app.js:

https://github.com/Meirimbr/curso_laravel/blob/master/7/app.js

Configurando layout

Abra o arquivo resoucers/views/layouts/master.blade.php e inclua o ID que foi passado #app, onde vão ser montados todos os componentes da aplicação:

id="app"

Vamos passar também o token dentro do <head>

<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">

E a linha que será responsável por captar os componentes:

<router-view></router-view>

Código fonte do master.blade.php:

https://github.com/Meirimbr/curso_laravel/blob/master/7/master.blade.php

Salve o arquivo e lembre-se de estar com o XAMPP com os serviços inicializados e o npm run watch no terminal.

Abra a aplicação e digite /example-component na url e veja se foi renderizado corretamente:

Pronto! No próximo post vou demonstrar como configurar os componentes e os links no menu.

[ ]'s