1.子应用路由跳转

一、qiankun框架中微应用之间如何跳转

1、通过history.pushState()方式进行跳转

2、将主应用的路由实例传递给子应用，子应用使用主应用实例进行跳转。

// 主应用
const microAppContainer = useRef(null); 
const history = useHistory();

useEffect(() => {
  let mainApp;
  if (microAppContainer.current) {
    // 手动加载微应用
    mainApp = loadMicroApp({
      name: "vue3 ts app",
      entry: "//localhost:8081",
      container: microAppContainer.current,
      /* 将路由注入子应用 */
      props: { mainAppRouter: history },
    });
  }
  return () => {
    // 别忘了卸载
    mainApp.unmount();
  };
}, []);

没错，把主应用的 history 以 props 的形式传给子应用即可，接下来子应用需要做的就是把它提供给全局使用。此处采用 Vue3 的语法来实现，如下：

jsx复制代码// 入口改造
function render(props) {
  const { container, maiAppRouter } = props;
  app = createApp(App);
  if (maiAppRouter) {
    /* 用 provide 挂到全局 */
    app.provide("maiAppRouter", maiAppRouter);
  }
  instance = app
    .use(store)
    .use(router)
    .mount(container ? container.querySelector("#app") : "#app");
}

// 组件使用
import { inject } from "vue";

const mainAppRouter = inject("maiAppRouter");
mainAppRouter.push('/'); // 等于 history.push('/')

单实例模式的改造就显而易见了。在子应用中没有任何差别，只是在主应用注册时传入 props 即可，不过因为 useHistory 必须在 React 组件中调用，所以需要换一下，如下：

/* 不能有 hooks，用 createBrowserHistory 替换 */
import { createBrowserHistory } from "history";

const history = createBrowserHistory();
// 注册微任务
registerMicroApps([
  {
    name: "vue2 app", // app name registered
    entry: "//localhost:8080",
    container: "#vue2Container",
    activeRule: "/app-vue",
    props: { mainAppRouter: history },
  },
]);

最后再附上 Vue2 版本的初始化 provide 代码：

 instance = new Vue({
    router,
    store,
    provide: { mainAppRouter }, // 初始化时直接挂载到实例
    render: (h) => h(App),
  }).$mount(container ? container.querySelector("#app") : "#app");