「实践篇」解决微前端 single

前言

本文介绍在做micro–spa项目的过程中，Vue子应用和React子应用跳转路由时遇到的问题。

项目情况：-spa项目，基础使用React，目前有2个子应用，1个Vue，1个React。路由方案是Vue、React+。

有交互场景从Vue子应用跳转到React子应用，或者从React子应用跳转到Vue子应用，所以遇到了问题。

遇到的问题

结合项目需求和遇到的问题，大家可以先思考解决方案~

——————分割线———— —- ————–

解决方案

主要处理以下两种激励：

但是看源码发现如果要触发还是需要调用.push触发流程，而要触发vue导航守卫还是需要调用.push触发进程

所以结合这两点，我想出了一个解决方案，已经在项目中使用了，下面是封装好的全局路由跳转工具：

window.micro = {
  // 子应用，会在相应应用挂载完成后设置
  apps: { vue: null, react: null },
  history: {
    push: (location, onComplete, onAbort) => {
      const url = typeof location === 'string' ? location : location.path;
      // 判断是哪个子应用
      const currentIsReact = isReactApp();
      const nextIsReact = isReactApp(`#${url}`);
      // 处理路由参数
      let state = {};
      let query = {};
      let name = '';
      if (typeof location !== 'string') {
        state = location.params || {};
        query = location.query || {};
        name = location.name || '';
      }
      if (!currentIsReact && nextIsReact) {
        // vue 跳 react：先用 vue-router 跳，在跳完的回调里再用 history 跳
        const reactHistoryHandle = () => {
          onComplete?.();
          history.push(`#/temp?t=${Math.random()}`);
          history.replace({ state, pathname: url, search: setQueryStringArgs(query) });
          // 因为跳多了1次 vue-router，所以 back 一下
          window.micro.apps.vue2.$router.back();
        };
        window.micro.apps.vue.$router.push(name ? { name, params: state, query } : { path: url, query }, reactHistoryHandle, onAbort);
      } else if (currentIsReact && !nextIsReact) {
        // react 跳 vue：先用 history 跳临时路由，再用 vue-router 跳，要配合 history.listen 做处理
        react2vue = () => {
          window.micro.apps.vue.$router.push(name ? { name, params: state, query } : { path: url, query }, onComplete, onAbort);
        };
        history.push('/temp_react_to_vue');
      } else if (currentIsReact && nextIsReact) {
        // react 跳 react：没有特殊，正常用 history 跳
      } else {
        // vue 跳 vue：没有特殊，正常用 vue-router 跳
      }
    },
  },
};

配合窃听和工具功能：

总结

这是我在实际项目中使用的解决方案。如果有更崇高更好的解决方案，希望在评论区和我一起讨论~

p>

收获/复活节彩蛋

因为之前熟悉Vue原理和源码，所以这次就用这个题来了解一下React组件的实现。这是一个简短的总结