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

8 篇文章 0 订阅
6 篇文章 1 订阅

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();
});
  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值