qiankun乾坤框架父子服务之间的跳转出现undefined路由

目录 

一、问题

二、原因 

三、解决方案

1.主应用处理

2.微应用处理

---

一、问题

最近在用Vite4+Typescript+Vue3.2+SSR+React17+Angular14+qiankun微应用架构重构我的博客。微应用架构用了阿里的qiankun，在实现界面微应用化后，发现了一个问题，就是当子应用切换过一次路由后，主应用路由报错。具体报错我录了个视频如下：

二、问题原因 

主应用的vue-router 在切换主应用路由时，会调用push(vue-router/history/html5.ts)方法。在265行会先调用一次changeLocation用来记录当前路由信息(中间状态)history.replaceState、locatin.replace由于url(http://localhost:3000undefined)无效而报错，

也就是在这一步执行的时候，在方法changeLocation(history/html5.ts)执行到history.replaceState、locatin.replace(214、223)方法的时候由于url(http://localhost:3000undefined)无效而报错，从207行看出，undefined其实就是to这个入参，是从外部传入的。

正常情况下，这一步操作后这里传入的to应该为/article，表示当前的路由信息，但是这里传入的to成了undefined。

主应用的popstate监听函数被子应用触发后就直接给它赋值了。

接下来去看了下qiankun的代码，在js沙箱相关处理的地方发现，当子应用获取history时，其实返回的就是主应用的history对象，所以它们使用的是同一个history对象，那么自然当子应用修改history信息时，主应用也会被影响到。

三、解决方案

经过两天的折磨。终于让我找到了解决问题的办法。需要主应用微应用同时修改重置路由状态。

1.主应用处理

通过router.beforeEach判断history.state数据结构是否异常，若异常则重新设置。

  const router = createRouter();
  router.beforeEach((to, from, next)=> {
    if (window.history.state === null) {
      history.replaceState({
        back: from.path,
        current: to.path,
        forward: null,
        position: NaN,
        replaced: false,
        scroll: null
      }, 'https://code-nav.top'+ to.path);
    }
    next();
  });

2.微应用处理

在子应用切换路由后手动调用一次window.history.pushState(null,'','')，调用后主应用路由可正常使用。

// 微应用切换主应用路由时重置
window.history.pushState(null,'','')

经过设置之后， 在子应用切换导致路由window.history.state === null后重新设置数据结构，这样就不会出现undefined。

问题完美解决，YYDS！ 欢迎在评论区交流。

如果文章对你有所帮助，❤️关注+点赞❤️鼓励一下！博主会持续更新。。。。

线上博客：富朝阳的博客

往期回顾

 css实现元素居中的6种方法 

Angular8升级至Angular13遇到的问题

前端vscode必备插件(强烈推荐)

Webpack性能优化

vite构建如何兼容低版本浏览器

前端性能优化9大策略（面试一网打尽）！

vue3.x使用prerender-spa-plugin预渲染达到SEO优化

 vite构建打包性能优化

 vue3.x使用prerender-spa-plugin预渲染达到SEO优化

 ES6实用的技巧和方法有哪些？

 css超出部分显示省略号

vue3使用i18n 实现国际化

vue3中使用prismjs或者highlight.js实现代码高亮

什么是 XSS 攻击？什么是 CSRF？什么是点击劫持？如何防御