初见微前端

基座

1.安装

npm i @micro-zoe/micro-app@alpha --save

2.引入 加start

根目录下

import microApp from '@micro-zoe/micro-app'

microApp.start()

3.配置路由（包括重定向 俩）

  {
    path: '/myPage',
    name: 'myPage',
    redirect: '/myPage/Login'
  },
  {
    path: '/myPage/*', 
    name: 'MyPage',
    component: MyPage
  }

4.页面中引入子应用
<micro-app
name="MyPage"
:url="TEST_MICRO_URL"
baseroute="/MyPage"

</micro-app>

子应用

1.总路由加

base: window.__MICRO_APP_BASE_ROUTE__ || '/',

2.路由配置

子页面的路由配置

  {
    path: window.__MICRO_APP_BASE_ROUTE__ || '/',
    component: RootApp,
    children: [
      {
        path: 'Login',
        name: 'Login',
        component: () => import('@/views/Login.vue')
      }
    ]
  },