qiankun 微應用demo

主應用

主應用使用react搭建，主應用主要提供左側的項目導航進行切換，和微應用的容器

react子應用

react項目需要注意的是路由的需要根據是否是微應用來生成path和鏈接。

function App(props) {
  const {publicPath} = props;
  return (
    <div className="App">
      <h3>react子應用</h3>
      <img src={img} alt="logo" width="200px" />
      <Router>
        <div>
          <nav>
            <ul>
              <li>
                <Link to={`${publicPath}`}>Home</Link>
              </li>
              <li>
                <Link to={`${publicPath}about`}>About</Link>
              </li>
              <li>
                <Link to={`${publicPath}users`}>Users</Link>
              </li>
            </ul>
          </nav>

          {/* A <Switch> looks through its children <Route>s and
          renders the first one that matches the current URL. */}
          <Switch>
            <Route path={`${publicPath}about`}>
              <About />
            </Route>
            <Route path={`${publicPath}users`}>
              <Users />
            </Route>
            <Route path={`${publicPath}`}>
              <Home />
            </Route>
          </Switch>
        </div>
      </Router>
    </div>
  );
}
function ContextApp() {
  return (
    <PublicPathContext.Consumer>
      {(path) => <App publicPath={path} />}
    </PublicPathContext.Consumer>
  );
}
export default ContextApp

vue子應用

vue同樣也是需要注意路由path的出來，vue是通過路由守衛來處理

 router.beforeEach((to, from, next) => {
    //避免死循環
    if (window.__POWERED_BY_QIANKUN__ && to.path.indexOf(basePath) < -1) {
      next(`${basePath}${to.path}`);
      return;
    } else {
      next();
    }
  });

最后效果：

代碼地址：https://gitee.com/rainbowChenhong/micro-web