micro_app解决项目中实际遇到的问题(浏览器回退url错乱)
1.子应用点击回退路径错乱// 在子应用(vue-router4)中添加如下设置 :没有对路由堆栈state做唯一性标记,导致基座和子应用相互影响,vue-router3及其它框架路由没有类似问题if (window.__MICRO_APP_ENVIRONMENT__) {// 如果__MICRO_APP_BASE_ROUTE__为 `/基座应用基础路由/子应用基础路由/`,则应去掉`/基座应用基
·
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();
});
更多推荐
已为社区贡献6条内容
所有评论(0)