Question

我正在尝试使用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;

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

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

您可以查看此Codepen以了解操作方法。请注意<router-view></router-view>

中的Line 22

Vue-Router + Vuetify不显示命令

1 个答案: