我正在使用babel在ES6中导入多个模块时遇到问题。我尝试在Vue.js中将我的应用程序结构化为模块化组件(或者在Angular2中为特征精确构建结构)
app/
moduleA/
components/
vuex/
index.js
routes.js
moduleB/
components/
vuex/
index.js
routes.js
index.js
routers.js
vuex.js
components.js
router/
vuex/
components/ -> shared
main.js
现在,我的问题是,如何导出和导入所有模块才能完美运行?
所以,让我们对moduleA路线说出以下代码
//moduleA/routes.js
export const routes = [
{ path: '', name: 'home', components: {
default: Home,
'header-top': Header
} }
];
同样适用于moduleB路线
//moduleA/routes.js
export const routes = [
{ path: '/user', components: {
default: User,
'header-bottom': Header
}, children: [
{ path: '', component: UserStart },
{ path: ':id', component: UserDetail },
{ path: ':id/edit', component: UserEdit, name: 'userEdit' }
] }
];
然后,我如何导入并完成这项工作。请帮忙。
由于
答案 0 :(得分:1)
您需要告诉您的模块所在的根路由器和root vuex。
所以,捆绑所有路线:
import { routes as moduleA } from './moduleA';
import { routes as moduleB } from './moduleB';
export default [ ...moduleA, ...moduleB, ];
为你的vuex做同样的事情:
import { vuex from moduleA } from './moduleA';
import { vuex as moduleB } from './moduleB';
export default { moduleA, moduleB, };
现在,在您的全球vuex/
:
import Vue from 'vue';
import Vuex from 'vuex';
import vuex from '../app';
export default new Vuex.Store({
modules: vuex,
});
并且,对于您的router/
:
import Vue from 'vue';
import Router from 'vue-router';
import { routers } from '../app';
Vue.use(Router);
export default new Router({
routes: routes,
});