[英]Vue.js ES6 import export
好吧,我面临使用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
现在,我的问题是,如何导出和导入所有模块以使其正常运行?
因此,对于模块A路由,我有以下代码
//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' }
] }
];
然后,我如何导入并获得这项工作。 请帮忙。
谢谢
您需要告诉根路由器和根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,
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.