Question

使用laravel，vue，vuex和vue-router制作我的第一个SPA。我有一个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>

Vue组件在Laravel 5.8中渲染了两次

0 个答案: