fix(module-loader): router.beforeEach in beforeCreate

affects: @vue-async/module-loader

router.beforeEach is not working well in beforeCreate at first time, move to Vue.prototype._init

Author: aceHubert

packages/module-loader/dev/App.js

@@ -1,12 +1,11 @@
-import Playground from './Playground';
-import DynamicComponent from './DynamicComponent';
+// app
 
 export default Vue.extend({
   name: 'App',
-  created() {
-    this.$dynamicComponent.add(DynamicComponent, 'dynamic');
-  },
   render(h) {
-    return h('div', { domProps: { id: 'app' } }, [h(Playground)]);
+    return h('div', { domProps: { id: 'app' } }, [
+      h('router-link', { staticStyle: { margin: '0 10px; 5px' }, props: { to: { name: 'remote-page-a' } } }, 'Page A'),
+      h('router-view'),
+    ]);
   },
 });

packages/module-loader/dev/Playground.js renamed to packages/module-loader/dev/Dashboard.js

@@ -1,8 +1,10 @@
 export default Vue.extend({
   name: 'Playground',
-  computed: Vuex.mapState('dynamicComponent', { dynamicComponents: 'dynamic' }),
+  computed: Vuex.mapState('dynamicComponent', { dynamicComponents: 'dashboard' }),
   render(h) {
-    const children = Object.values(this.dynamicComponents || {}).map((component) => h(component));
-    return h('div', { staticClass: 'playground' }, [h('h3', 'PLAYGROUND'), ...children]);
+    const children = Object.values(this.dynamicComponents || {}).map((component) =>
+      h(component.component || component),
+    );
+    return h('div', { staticClass: 'playground' }, [h('h3', 'Dashboard'), ...children]);
   },
 });

packages/module-loader/dev/DynamicComponent.js

@@ -1,23 +1,23 @@
 import Vue from 'vue';
-import router from './router';
+import router, { addRoutes } from './router';
 import store from './store';
 import ModuleLoader from '@vue-async/module-loader';
 import App from './app';
 
-const moduleLoader = new ModuleLoader({});
+const moduleLoader = new ModuleLoader({
+  addRoutes, // 重写 addRoutes
+});
 
 const vm = new Vue({
-  data: () => ({ isLoaded: document.readyState === 'complete' }),
   router,
   store,
   moduleLoader,
-  render(h) {
-    return this.isLoaded ? h(App) : undefined;
-  },
-}).$mount('#app');
+  render: (h) => h(App),
+});
 
-// Prevent layout jump while waiting for styles
-vm.isLoaded ||
-  window.addEventListener('load', () => {
-    vm.isLoaded = true;
-  });
+vm.$moduleLoader({
+  dymanicRouter: '/static/dymanicRouter.umd.js',
+  dymanicComponent: '/static/dymanicComponent.umd.js',
+}).then(() => {
+  vm.$mount('#app');
+});

packages/module-loader/dev/main.js

@@ -1,22 +1,38 @@
 /**
  * router
  */
-const component1 = {
-  template: `<div class="title">Page 1</div>`,
-};
-const notfound = {
-  template: `<div class="title">Not Found</div>`,
+import Dashboard from './Dashboard';
+const Notfound = {
+  template: `<h3>Not Found</h3>`,
 };
 
 const router = new VueRouter({
+  base: '/',
+  mode: 'history',
   routes: [
     {
-      path: '/page1',
-      name: 'Page 1',
-      component: component1,
+      path: '/',
+      name: 'index',
+      component: Dashboard,
     },
-    { path: '*', component: notfound },
+    { path: '*', component: Notfound },
   ],
 });
 
+// 模块中路由配置没有根前缀，用于主程序自定义
+function root(routes) {
+  return routes.map((route) => {
+    route.path = '/' + route.path;
+    return route;
+  });
+}
+
+export function addRoutes(routes) {
+  const options = router.options;
+  // 合并路由
+  options.routes = root(routes).concat(options.routes);
+  const newRouter = new VueRouter(options);
+  router.matcher = newRouter.matcher;
+}
+
 export default router;