Vue-Router + Vuetify does not display the command - laravel

Question

I am trying to load a component with Vue-Router, besides loading the required URL it does not change what is being displayed. If I access the URL path manually it displays the component correctly. I am also using Laravel and because of this, I inserted the following line on web.php so Vue-Router can be responsible for handling the routes.
Route::get('/{any}', 'SinglePageController#index')->where('any', '.*');
Watch here the error (IMGUR - Gif):
App.js
import './bootstrap';
import Vue from 'vue';
import Vuetify from 'vuetify';
import axios from 'axios';
import VueCookie from 'vue-cookie';
import router from '#/js/routes.js';
import App from '#/js/views/App';
Vue.use(Vuetify);
Vue.use(VueCookie);
const app = new Vue({
el: '#app',
router,
render: h => h(App)
});
export default app;
routes.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '#/js/views/Home';
import About from '#/js/views/About';
import Exames from '#/js/views/Exames/Exames';
import checkAuthentication from '#/js/utils/check-authentication.js';
import getStaffData from '#/js/utils/get-staff-data.js';
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
},
{
path: '/exames',
name: 'exames',
component: Exames
}
]
});
//router.beforeEach(checkAuthentication);
//router.beforeEach(getStaffData);
export default router;
Home.vue
<template>
<div>
<h1>Página de Início</h1>
</div>
</template>
Exames.vue
<template>
<div>
<v-layout d-flex align-start justify-start row fill-height>
<v-flex xs6 sm6>
<v-card>
<v-card-title primary-title>
<div>
<h3 class="headline mb-0">Kangaroo Valley Safari</h3>
<div>Located two hours south of Sydney in the <br>Southern Highlands of New South Wales, ...</div>
</div>
</v-card-title>
<v-card-actions>
<v-btn flat color="orange">Share</v-btn>
<v-btn flat color="orange">Explore</v-btn>
</v-card-actions>
</v-card>
</v-flex>
<v-flex xs6 sm6>
<v-card>
<v-card-title primary-title>
<div>
<h3 class="headline mb-0">Kangaroo Valley Safari</h3>
<div>Located two hours south of Sydney in the <br>Southern Highlands of New South Wales, ...</div>
</div>
</v-card-title>
<v-card-actions>
<v-btn flat color="orange">Share</v-btn>
<v-btn flat color="orange">Explore</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</div>
</template>
<script>
export default {
props: ['membro'],
data() {
return {
name: 'exames'
}
}
}
</script>

Answer 1

You have to load the components in a router-view, so that when route changes, the components load within that router-view component.
You can look at this codepen to see how to do that. Notice the <router-view></router-view> in Line 22