Question

我正在逐步跟踪laracast的vue2。在描述vue路由器基础知识的第26课上，路由器文件的定义如下：

//file: routes.js
import VueRouter from 'vue-router';
import Home from './Views/Home.vue';
import About from './Views/About.vue';
const routes = [
 {
  path: '/',
  component: require('./Views/Home.vue')
 },
]

export default new VueRouter ({
 routes
});

//file: Home.vue

<template>
 <div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Home Page</div>

                <div class="card-body">
                    I'm an example component.
                </div>
            </div>
        </div>
    </div>
 </div>
</template>

我遇到一个错误，Failed to mount component: template or render function not defined.

一些谷歌搜索显示了我需要像这样更改组件属性的解决方案：

component: require('./Views/About.vue').default

那是我需要附加 .default 。

我希望有人解释原因，并可能将我带到一些资源以获取更多详细信息。

我可以通过其他方式完成此操作，例如在Home.vue文件中添加导出语句吗？如果是这样，什么是正确的语法。

谢谢

Answer 1

说实话，我不知道为什么你会这样做，而不是清楚而可行的方式：

import VueRouter from 'vue-router';
import Home from './Views/Home.vue';
import About from './Views/About.vue';
const routes = [
 {
  path: '/',
  component: Home
 },
]

export default new VueRouter ({
 routes
});

为什么我需要在import语句后附加.default

1 个答案: