micro_app解决项目中实际遇到的问题（浏览器回退url错乱）

1.子应用点击回退路径错乱

// 在子应用（vue-router4）中添加如下设置 ：没有对路由堆栈state做唯一性标记，导致基座和子应用相互影响，vue-router3及其它框架路由没有类似问题

if (window.__MICRO_APP_ENVIRONMENT__) {
    
    
  // 如果__MICRO_APP_BASE_ROUTE__为 `/基座应用基础路由/子应用基础路由/`，则应去掉`/基座应用基础路由`
  // 如果对这句话不理解，可以参考案例：https://github.com/micro-zoe/micro-app-demo
  const realBaseRoute = window.__MICRO_APP_BASE_ROUTE__;

  router.beforeEach(() => {
    
    
    if (typeof window.history.state?.current === 'string') {
    
    
      window.history.state.current = window.history.state.current.replace(
        new RegExp(realBaseRoute, 'g'),
        '',
      );
    }
  });

  router.afterEach(() => {
    
    
    if (typeof window.history.state === 'object') {
    
    
      window.history.state.current =
        realBaseRoute + (window.history.state.current || '');
    }
  });
}

// ========================主应用=============================
// 路由守卫
router.beforeEach(async (to, from, next) => {
    
    
  /**
   * 当前应用内的跳转无需修改
   * 如果当前是在本身应用环境下，无需修改
   * 解决子应用深层路由反复前进后退的bug
   */
  if(to.path === from.path) {
    
    
    next();
    return;
  }
  if (from.fullPath.startsWith('/micro/')) {
    
    
    //micro-app -修改回退失效
    if (window.history.state) {
    
    
      window.history.state.current = from.fullPath;
    }
  }
  
  // 解决子应用是vue-router3 与 vue-router4冲突
  if (!history?.state?.current) {
    
    
    assign(history.state, {
    
     current: from.fullPath });
  }

  next();
});