更新

Question

我尝试在laravel中使用vuejs，我安装了npm vue-router vue-axios但是当我尝试加载我的页面时，我得到控制台错误，如：ReferenceError: CreateCategory is not defined并清空页。

这是我的app.js：

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'
// });

PS：我读过有关路由器中组件的文章，我已经尝试使用.default这两种方法都无法正常工作，因为我没有得到控制台错误。

更新

我的CreateCategory.vue组件：

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

Answer 1

CreateCategory.vue是单个文件组件。

在那里，您必须拥有export default {}，其中{}实际上是组件对象。

您需要做的是，您需要导入CreateCategory.vue然后分配它，如下所示：

import CreateCategory from './components/CreateCategory.vue';

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

现在这将有效。您必须对DisplayCategory和EditCategory执行相同操作。

Answer 2

我发现了什么问题，我想运行php artisan serve才能看到我的数据。如果只是打开我的网址，我会获得blanck页面，但serve我也会得到我的数据。

vue组件不会加载

更新

2 个答案: