Vue-laravel Spa中的空路由器视图

Question

我很难在laravel中使用vue路由。该视图正在加载包含路由器视图的App.vue，该视图应正在加载ExampleComponent。但是我在浏览器中得到的只是一个空的路由器视图：

谁能告诉我ExampleComponent为什么不加载？

Empty router-view

App.vue

LiveData

app.js

    <template>
    <div>
    The App-view is loading  
    <router-view></router-view>
   </div>
</template>
<script>
export default {
    name: "App",

}
</script>
<style scoped>

</style>

router.js

import Vue from 'vue';
import router from './router';
import App from './components/App';

require('./bootstrap');

const app = new Vue({
    el: '#app',
    components: {
        App
    },
    router
});

ExampleComponent.vue

import Vue from 'vue';
import VueRouter from 'vue-router';
import ExampleComponent from './components/ExampleComponent';

Vue.use(VueRouter);
export default new VueRouter({
    routes: [
        { path: '/', component: ExampleComponent}
    ],
    mode: 'history',
});