Vue .component против импорта для загрузки компонента

Question

Почему, когда я использую Vue.component для загрузки двух нижеуказанных компонентов, я получаю следующую ошибку в консоли javascript, когда она работает с import?

Uncaught ReferenceError: dashboard не определено

app.js:

Vue.component('left-menu', require('./components/LeftMenu.vue').default);
// Vue.component('dashboard', require('./components/foo/dashboard.vue').default);
// Vue.component('members', require('./components/foo/members.vue').default);
import dashboard from './components/foo/dashboard.vue';
import members from './components/foo/members.vue';

const routes = [
    {
        path: '/dashboard',
        component: dashboard
    },
    // {
    //     path: '/members',
    //     component: members
    // }
];

Answer 1

В примере, который генерирует ошибки, компоненты не распознаются как переменные, поэтому вы должны сделать что-то вроде:

const dashboard = {
  template: `<div>Dashboard</div>` ,

}

const routes = [
    {
        path: '/dashboard',
        component: dashboard
    },
    // {
    //     path: '/members',
    //     component: members
    // }
];

Answer 2

Поскольку вы используете переменную dashboard в своих маршрутах, эта переменная существует в "пути импорта", но не в "Vue компоненте"