Question

我刚刚开始学习VueJS，并且对如何在路由器的路由中使用组件感到困惑。

我有一个组件：

export default Home = {
  template: `
    <div class="top_container">
        <div class="left_container">
            <div class="title">
                <h1>Current Settings</h1>
            </div>
            <div class="inner_container">
                <p>URL: <span><?php if(isset($arrayInputs[0])) echo $arrayInputs[0]; ?></span></p>
                <p>URL Refresh Interval: <span><?php if(isset($arrayInputs[1])) echo $arrayInputs[1]; ?></span>(s)</p>
                <p>Brightness: <span><?php if(isset($arrayInputs[2])) echo $arrayInputs[2]; ?></span>(&#37;)</p>
            </div>
        </div>

        <div class="right_container">
            <div class="title">
                <h1>Change Settings</h1>
            </div>
            <div class="inner_container">

            </div>
        </div>
    </div>
    `,
};

我有主应用程序：

import "https://cdn.jsdelivr.net/npm/vue/dist/vue.js";
import "https://unpkg.com/vue-router/dist/vue-router.js";

import "./components/Navbar.js";
import Home from "./components/Home.js";

const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/home' },
    { path: '/home', component: Home },
    // { path: '/dhcp', component: DHCP },
    // { path: '/static', component: Static },
    // { path: '/update', component: Update },
    { path: '*', component: NotFound }
  ]
})

new Vue({
  el: '#app',
  router: router,
})

我有HTML：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <script type="module" src="./src/App.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="app">
        <Navbar></Navbar>
        <section>
            <transition name="fade" mode="out-in">
                <router-view></router-view>
            </transition>
        </section>
    </div>
</body>

</html>

和错误：

Home.js:1 Uncaught ReferenceError: Home is not defined

我在做什么错了？

我知道要使用组件创建html元素，可以使用：

Vue.component("Home", { ... });

就像我对<Navbar></Navbar>所做的一样，但是我需要在routes中将它们用作组件而不是html标记。

Answer 1

您的参考错误来自Home第一行中的单词Home.js。像这样启动Home组件：

export default {
    name: "Home",
    ...

Answer 2

导出默认首页= {

删除房屋应为您工作。我在上面写的是如何编写一个单独的route.js文件以及编写路由和导入组件的最佳实践

如何在路由器的路由中使用.js文件组件

2 个答案: