Компонент Vue визуализируется дважды в Laravel 5.8 - PullRequest
Новая
       25

Компонент Vue визуализируется дважды в Laravel 5.8

0 голосов
/ 02 июля 2019

Работа над моим первым SPA с laravel, vue, vuex и vue-router.У меня есть MainApp.vue (для размещения всего приложения), Header.vue и компонент Dashboard.vue.Header.vue дважды отображается в браузере.

    //MainApp.vue
    <template>
     <div id="main">
        <Header />
        <div class="content">
            <router-view></router-view>
        </div>
     </div>
    </template>

    <script>
        import Header from './Header.vue'

        export default {
           name: 'main-app',
           components: {
               Header
           }
        }
    </script>

app.js 

    require('./bootstrap');
    import Vue from 'vue';
    import VueRouter from 'vue-router';
    import Vuex from 'vuex';
    import {routes} from './routes';
    import MainApp from './components/MainApp.vue';
    import Header from './components/Header.vue';

    Vue.use(VueRouter);
    Vue.use(Vuex);


    const router = new VueRouter({
        routes,
        mode: 'history'
    });

    const app = new Vue({
        el: '#app',
        router,
        components: {
            MainApp,
            Header

        }
    });

тело welcome.blade.php 

<body style="font-family: 'Rajdhani', sans-serif;">

    <div id="app">
        <main-app />
    </div>

    <!-- Scripts -->
    <script async src="{{ mix('js/app.js') }}"></script>
    <script src="{{ asset('js/jquery-3.3.1.min.js') }}" ></script>
    <script src="{{ asset('js/popper.min.js') }}" ></script>
    <script src="{{ asset('js/bootstrap.min.js') }}" ></script>
    <script src="{{ asset('js/mdb.min.js') }}" ></script>
</body>
...