Vue.component vs import 加载组件

Posted 2023-02-23

【中文标题】Vue.component vs import 加载组件

【英文标题】：Vue.component vs import to load a component

【发布时间】：2020-08-01 21:27:21

【问题描述】：

为什么当我使用Vue.component 加载下面的两个注释组件时，当它与import 一起使用时，我在javascript 控制台中收到以下错误？

未捕获的 ReferenceError：仪表板未定义

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
    // 
];

【参考方案1】：

因为你在路由中使用了dashboard变量，所以这个变量存在于“导入方式”中，而不存在于“Vue组件方式”中

【参考方案2】：

在生成错误的示例中，组件未被识别为变量，因此您应该执行以下操作：

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



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