问vue组件无法加载

EN

require('./bootstrap');

window.Vue = require('vue');

import VueRouter from 'vue-router';
Vue.use(VueRouter);

import VueAxios from 'vue-axios';
import axios from 'axios';
Vue.use(VueAxios, axios);


import App from './App.vue';
Vue.component('CreateCategory', require('./components/CreateCategory.vue'));
Vue.component('DisplayCategory', require('./components/DisplayCategory.vue'));
Vue.component('EditCategory', require('./components/EditCategory.vue'));


const routes = [
  {
    name: 'CreateCategory',
    path: '/categories/create',
    component: CreateCategory
  },
  {
    name: 'DisplayCategory',
    path: '/',
    component: DisplayCategory
  },
  {
    name: 'EditCategory',
    path: '/edit/:id',
    component: EditCategory
   }
];



const router = new VueRouter({ mode: 'history', routes: routes});
new Vue(Vue.util.extend({ router }, App)).$mount('#app');

// const app = new Vue({
//   router,
//   render: h => h(App)
// });

// const app = new Vue({
//     el: '#app'
// });

<template>
  <div>
    <h1>Create A Category</h1>
    <form v-on:submit.prevent="addCategory">
      <div class="row">
        <div class="col-md-6">
          <div class="form-group">
            <label>Category Title:</label>
            <input type="text" class="form-control" v-model="category.title">
          </div>
        </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <div class="form-group">
              <label>Category Status:</label>
              <input type="text" class="form-control col-md-6" v-model="category.status" />
            </div>
          </div>
        </div><br />
        <div class="form-group">
          <button class="btn btn-primary">Add Category</button>
        </div>
    </form>
  </div>
</template>

<script>
  export default {
    data(){
        return{
          category:{}
        }
    },
    methods: {
      addCategory(){
        let uri = 'http://localhost/vuetjd/public/categories';
        this.axios.post(uri, this.category).then((response) => {
          this.$router.push({title: 'DisplayCategory'})
        })
    }
  }
}
</script>