Vue-Router + Vuetify does not display the command

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>

Mahbub Mahbub · Accepted Answer · 2018-12-17T12:13:50

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

Vue-Router + Vuetify does not display the command

1 Answers