为什么当我使用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
// }
];
由于在路由中使用了dashboard
变量,因此该变量以“导入方式”存在,但不以“ Vue组件方式”存在]
在产生错误的示例中,组件未被识别为变量,因此您应该执行类似的操作:
const dashboard = {
template: require('./components/foo/dashboard.vue').default ,
}
const routes = [
{
path: '/dashboard',
component: dashboard
},
// {
// path: '/members',
// component: members
// }
];