Laravel中Vue组件加载失败：ReferenceError异常求助

Let's break down what's causing your error and fix it step by step:

Root Cause #

You're registering components globally with Vue.component(), but this doesn't create a variable named CreateCategory that you can reference directly in your router config. Additionally, when using require() to import single-file components in Laravel's Mix environment, you need to access the .default property to get the actual component export (since your components use export default).

Solution 1: Assign Components to Variables First #

Update your app.js to first import components into variables (with .default) and then register them globally (if you need to use them outside the router):

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

// Import components and assign to variables (add .default to access the export)
const CreateCategory = require('./components/CreateCategory.vue').default;
const DisplayCategory = require('./components/DisplayCategory.vue').default;
const EditCategory = require('./components/EditCategory.vue').default;

// Register global components (optional if you only use these components via router)
Vue.component('CreateCategory', CreateCategory);
Vue.component('DisplayCategory', DisplayCategory);
Vue.component('EditCategory', EditCategory);

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

Solution 2: Directly Import Components in Router (Recommended) #

If you only need these components for routing, you don't need to register them globally. Import them directly in your route definitions to keep your code cleaner:

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

const routes = [
 { name: 'CreateCategory', path: '/categories/create', component: require('./components/CreateCategory.vue').default },
 { name: 'DisplayCategory', path: '/', component: require('./components/DisplayCategory.vue').default },
 { name: 'EditCategory', path: '/edit/:id', component: require('./components/EditCategory.vue').default }
];

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

Additional Fixes for Blank Page #

Even if you fix the reference error, your page might stay blank if:

1. Missing <router-view> in App.vue: Ensure your App.vue includes the <router-view></router-view> tag. This is where Vue Router renders your routed components—without it, there's no place to display your content.
2. Incorrect Router Redirect: In your CreateCategory.vue, the redirect uses title instead of name (which matches your route's defined name). Update the method:

addCategory(){
 let uri = 'http://localhost/vuetjd/public/categories';
 this.axios.post(uri, this.category).then((response) => {
 this.$router.push({name: 'DisplayCategory'}) // Changed from "title" to "name"
 })
}

内容的提问来源于stack exchange，提问作者mafortis