Vue-Router + Vuetify не отображает команду - PullRequest
Новая
       31

Vue-Router + Vuetify не отображает команду

0 голосов
/ 17 декабря 2018

Я пытаюсь загрузить компонент с помощью Vue-Router, кроме загрузки требуемого URL-адреса, он не меняет отображаемое содержимое.Если я обращаюсь к URL-пути вручную, он правильно отображает компонент.Я также использую Laravel, и поэтому я вставил следующую строку в web.php , чтобы Vue-Router мог отвечать за обработку маршрутов. 

Route::get('/{any}', 'SinglePageController@index')->where('any', '.*');

Смотретьздесь ошибка (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;

rout.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>

1 Ответ

0 голосов
/ 17 декабря 2018

Вам необходимо загрузить компоненты в виде роутера, чтобы при изменении маршрута компоненты загружались в этот компонент вида роутера.

Вы можете посмотреть на этот кодовый блок, чтобы увидеть, как это сделать.Обратите внимание на <router-view></router-view> в Line 22

...