Neste post veremos como adicionar novos componentes na aplicação, adicionar os links corretamente no menu lateral e ativar o modo history do vue router.

Primeiramente vamos editar o app.js mudando o nome do componente exemplo:

let routes = [
    { path: '/dashboard', component: require('./components/Dashboard.vue') }
]

E podemos apagar a linha 30:

Vue.component('example-component', require('./components/ExampleComponent.vue'));

Agora vamos editar o componente exemplo, abra o caminho

 resoucers/assets/js/components/ExampleComponent.vue

e mude o nome do arquivo para Dashboard.vue

Abra o arquivo master.blade.php e inclua o link para a rota. Documentação https://router.vuejs.org/api/#router-link

Onde temos a linha:

<a href="#" class="nav-link">
 <i class="nav-icon fas fa-tachometer-alt"></i>
 <p>
    Dashboard
 </p>
</a>

Alteramos para o padrão do vue router:

<router-link to="/dashboard" class="nav-link">
 <i class="nav-icon fas fa-tachometer-alt"></i>
 <p>
     Dashboard
 </p>
</router-link>

Criando componente Usuários

Neste primeiro momento vamos criar apenas para fins didáticos, então pode copiar o componente Dashboard.vue e criar o Usuarios.vue

No app.js inclua o novo componente:

let routes = [
    { path: '/dashboard', component: require('./components/Dashboard.vue') },
    { path: '/usuarios', component: require('./components/Usuarios.vue') }
]

E adicione o link no master.blade.php:

<li class="nav-item">
 <router-link to="/usuarios" class="nav-link">
 <i class="nav-icon fas fa-users"></i>
 <p>
     Usuários
 </p>
 </router-link>
</li>

Execute o npm run watch e veja se os links funcionam corretamente:

Agora vamos ativar o modo history, documentação:

https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations

Abra o aquivo app.js e adicione:

const router = new VueRouter({
    mode: 'history',
    routes // short for `routes: routes`
})

Salve e repare que a URL já mudou ao navegar pelos links:

Porém se atualizar a página ou tentar entrar nesse link diretamente vai retornar o erro de página não encontrada, pois não tratamos a rota ainda.

Para corrigir acesse o arquivo:

 routes/web.php

E inclua a linha:

Route::get('{path}',"HomeController@index")->where( 'path', '([A-z\d-\/_.]+)?' );

Pronto! Agora os links são acessados normalmente mesmo atualizando a página.

Código fonte da aula: https://github.com/Meirimbr/curso_laravel/tree/master/8

[ ]'s