почему мне нужно добавить .default после оператора импорта - PullRequest
0 голосов
/ 28 марта 2019

Я слежу за серией vara2 от laracast.На уроке 26, который описывает основы vue router, файл роутера определяется следующим образом:

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

Некоторое поиск в Google выявил решение, которое мне нужночтобы изменить свойство компонента следующим образом:

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

То есть мне нужно добавить .default .

Я хотел бы, чтобы кто-то объяснил, почему и может быть направить меняна некоторый ресурс для получения дополнительной информации.

Могу ли я сделать это каким-либо другим способом, например, добавить инструкцию экспорта в мой файл Home.vue?Если так, то какой будет правильный синтаксис.

Спасибо

1 Ответ

0 голосов
/ 31 марта 2019

Если честно, я не знаю, почему вы сделали бы это вместо ясного и рабочего способа:

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
});
...