Vue-Router + Vuetify 不显示命令答案

【问题标题】：Vue-Router + Vuetify does not display the commandVue-Router + Vuetify 不显示命令
【发布时间】：2018-12-16 23:29:34
【问题描述】：

我正在尝试使用 Vue-Router 加载组件，除了加载所需的 URL 之外，它不会改变显示的内容。如果我手动访问 URL 路径，它会正确显示组件。我也在使用 Laravel，因此，我在 web.php 上插入了以下行，以便 Vue-Router 可以负责处理路由。

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;

主页.vue

<template>
    <div>
        <h1>Página de Início</h1>
    </div>
</template>

考试.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>

【问题讨论】：

标签： laravel components vue-router display vuetify.js

【解决方案1】：

您必须在路由器视图中加载组件，以便当路由更改时，组件会在该路由器视图组件中加载。

您可以查看此代码笔以了解如何执行此操作。注意Line 22中的<router-view></router-view>

【讨论】：