Table of contents
1. Main application processing
2. Micro application processing
1. Problems
Recently, I am refactoring my blog with Vite4+Typescript+Vue3.2+SSR+React17+Angular14+qiankun micro-application architecture . Ali’s qiankun was used in the micro-application architecture. After realizing the micro-application of the interface, a problem was found, that is, when the sub-application switched the route once, the main application route reported an error. The specific error I recorded a video is as follows:
Two, the cause of the problem
vue-router When the main application switches the main application route, push(vue-router/history/html5.ts)the method will be called. In line 265, it will be called once changeLocationto record the current routing information (intermediate state) history.replaceState, and an error will be reported locatin.replacedue to url(http://localhost:3000undefined)invalidity.
That is, when this step is executed, when the method changeLocation(history/html5.ts) is executed to history.replaceStatethe locatin.replace(214, 223) method, url(http://localhost:3000undefined)an error is reported due to invalidity. From line 207, it can be seen that undefinedit is actually the input parameter to, which is from the outside incoming.
Under normal circumstances, after this step, the input here toshould be /article, indicating the current routing information, but the input here tohas become undefined.
After the monitoring function of the main application popstateis triggered by the sub-application, it is directly assigned a value.
Next, I looked at the following qiankuncode and found that when the sub-application gets it history, it actually returns historythe object of the main application, so they use the same historyobject, so naturally when the sub-application modifies historythe information , the main application will also be affected.
3. Solutions
After two days of torture. Finally let me find a solution to my problem. The main application micro application needs to modify and reset the routing state at the same time.
1. Main application processing
Use router.beforeEach to judge whether the history.state data structure is abnormal, and reset it if it is abnormal.
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. Micro application processing
Manually call window.history.pushState(null,'','') once after the sub-application switches the route, and the main application route can be used normally after the call.
// 微应用切换主应用路由时重置
window.history.pushState(null,'','')After setting, reset the data structure after the sub-application switch causes the routing window.history.state === null, so that undefined will not appear.
The problem is perfectly solved, YYDS! Welcome to communicate in the comment area.
If the article is helpful to you, ❤️Follow+Like❤️Encourage ! The blogger will continue to update. . . .
Online Blog: Fu Chaoyang's Blog