未捕获的 ReferenceError：未定义主页 - Laravel Vue.js

Question

我是 Vue 和 Laravel 的新手，我正在尝试制作单页应用程序。我设置了我的路由器和路由，但它说我的组件没有定义。我不明白为什么，因为我有一个位于资源/js/components/home 中的 Home 组件。我的 routes.js 位于 resources/js 中，而我的 app.js 位于 resources/js 中我觉得这是一个菜鸟问题，但我似乎无法弄清楚。

app.js:53562 Uncaught ReferenceError: Home is not defined 在 Module../resources/js/routes.js (app.js:53562) 在 webpack_require (app.js:20) 在模块../resources/js/app.js (app.js:53328) 在 webpack_require (app.js:20) 在 Object.0 (app.js:53585) 在 webpack_require (app.js:20) 在 app.js:84 在 app.js:87 ./resources/js/routes.js @ app.js:53562 webpack_require @ app.js:20 ./resources/js/app.js @ app.js:53328 webpack_require @app.js:20 0 @app.js:53585 webpack_require@app.js:20（匿名）@app.js:84（匿名）@app.js:87

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

Vue.use(VueRouter);
Vue.use(Vuex);

const router = new VueRouter({
    routes,
    mode: "history"
});

window.app = new Vue({
    el: "#app",
    router,
    components: {
        MainApp
    }
});

routes.js

export const routes = [
    {
        path: "/components/home",
        name: "home",
        component: Home
    }
];

首页.vue

<template>
    <div class="container">
        <div class="row justify-content-center">
            <!-- <button v-on:click="switchTable" type="button" class="btn btn-primary">Next Page</button> -->
            <li
                v-for="(column, idx) in table"
                :key="idx"
                class="col-md-8 mb-1"
                style="list-style-type:none"
            >
                <Card v-bind:title="column.title" v-bind:description="column.description"></Card>
            </li>
        </div>
    </div>
</template>

<script>
import Card from "../ui/Card.vue";
export default {
    name: "home",
    props: {
        currentUser: Object
    },
    components: {
        Card
    },
    data() {
        return {
            tableNames: ["campaign", "location"],
            currentTable: 0,
            table: []
        };
    },
    mounted() {
        this.getTableFromDatabase("null", this.tableNames[this.currentTable]);
    },
    methods: {
        getTableFromDatabase: function(user, tableName) {
            axios
                .get("./api/" + tableName)
                .then(response => (this.table = response.data));
        },
        switchTable: function(currentTable, nextTable) {
            console.log("");
        }
    }
};
</script>

<style scoped>
</style>

Answer 1

如果你想引用它，你必须在你的路由器文件中导入你的组件。 （这实际上适用于您想要在 JacaScript 中跨不同模块使用的每个变量）

在 router.js 中添加这一行：

import Home from './path/to/components/home.vue';