HTML怎么做微前端路由_html微前端子应用路由方案【深度解析】-html教程-PHP中文网

子应用路由必须与主应用base path对齐，否则导致跳转失效、刷新404或重定向；需通过window.__micro_app_base_route__传入并配置路由base，服务端需fallback兜底，且须主动通知主应用路由变更。

html怎么做微前端路由_html微前端子应用路由方案【深度解析】

微前端子应用的路由不能自己“认路”，必须和主应用对齐 base path，否则 history.pushState 写错、useNavigate 跳转失效、刷新 404 或无限重定向——这是绝大多数踩坑的根源。

子应用启动时若把 /app1/user/123 当作 /user/123 解析，就会漏掉前缀，导致内部路由匹配失败。关键不是“能不能跳”，而是“跳完 URL 是什么”以及“主应用是否感知到变化”。

主应用需在挂载子应用前，通过 props 或全局变量（如 window.__MICRO_APP_BASE_ROUTE__）显式传入 base path，例如 "/app1"
子应用路由初始化时必须用该 base path 构造完整路径：Vue Router 配置 base: window.__MICRO_APP_BASE_ROUTE__ || '/'；React Router v6+ 使用 <router basename="{base}"></router>
避免硬编码 basename 或依赖 process.env.PUBLIC_URL，它们在运行时不可控，尤其在主应用动态加载场景下会失效

这不是子应用的问题，是服务端没兜底。当用户直接访问 https://host/app1/order/5，请求到达 Nginx 或 Express 时，它根本不知道这是前端路由，只会按静态文件找 /app1/order/5 路径，自然 404。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

主应用部署的服务端必须配置 fallback：所有不匹配静态资源的 /app1/* 请求，都返回主应用的 index.html
Nginx 示例：location /app1 { try_files $uri $uri/ /app1/index.html; }
Express 示例：app.get('/app1/*', (req, res) => res.sendFile(path.join(__dirname, 'index.html')));
注意：子应用自己的构建输出无需改 publicPath，只要确保其静态资源（js/css）能被主应用正确加载即可；base path 只影响路由解析，不影响资源加载路径

主应用需要知道子应用当前在哪，才能做权限校验、菜单高亮、埋点上报等。但子应用用 history.pushState 或 useNavigate 时，主应用默认收不到通知。

推荐方案：子应用在路由变化后主动 dispatch 自定义事件，如 new CustomEvent('micro-app-route-change', { detail: { pathname: location.pathname } })，主应用监听该事件
不推荐劫持 history.pushState：容易与框架内部逻辑冲突（比如 React Router v6 的 navigate 已封装了 pushState），且难以覆盖 replaceState、浏览器前进后退等场景
Vue Router 可在 router.afterEach 钩子中发事件；React Router v6+ 可用 useLocation + useEffect 监听并上报

不能。Hash 模式只是把路由信息塞进 # 后面，但子应用仍需知道自己“属于哪个上下文”。比如主应用在 /app2 下加载子应用，用户访问 https://host/#/user，子应用仍需理解这个 /user 是在 /app2 域内，否则菜单高亮、权限判断全乱。

Hash 模式下 base path 依然要传，只是不参与 URL 路径匹配，而用于上下文标识和状态管理
例如：子应用内部生成跳转链接时，to="/settings" 应转为 to="#/app2/settings"（或统一加前缀再截取），否则主应用无法区分不同子应用的同名 hash
Hash 模式省去了服务端 fallback 配置，但牺牲了 SEO 和 URL 美观性，且在微前端中并未规避路由协同问题

最常被忽略的一点：子应用路由的「激活状态」不能只靠 URL 匹配，必须结合主应用下发的生命周期信号（如 mounted、unmounted）来启停路由监听，否则卸载后仍在响应 popstate，会造成内存泄漏和意外交互。