Блог

Я следую пошаговой серии vue2 от 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.

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

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

Спасибо

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

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