micro-app点击子路由无反应，导航地址变化了页面没更新

最新推荐文章于 2025-08-10 13:35:10 发布

原创

最新推荐文章于 2025-08-10 13:35:10 发布 · 637 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端框架 #micro-app #miacroapp

micro-app点击子路由无反应，导航地址变化了页面没更新

解决：监听路由变化发送路由给子应用，子应用监听路由并且push
1.基座

		// 初次进入默认路由选中
	watch(() => router.currentRoute.value,
		(newValue) => {
   
   
			let name = ""
			if (newValue.meta.parent == "慢病死因") {
   
   
				name

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

淋雪小新

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

三十一、micro-app踩坑

张先森的博客

02-14

405

基座与子应用共用一套路由权限，路由路径标记是否是子应用路由,这里标记‘/micro-’开头的路径为子应用路由，后面的命名可以根据不同的子应用动态调整，用于基座加载子应用时匹配不同的子应用name值。这里有个问题是当基座加载了子应用的A页面，当子应用的A页面跳转到二级页面，刷新浏览器又会回到A页面，这个交互显然是有问题的，正确的应该是刷新二级页面后路由应该还是在二级页面。基座存储到浏览器本地，加载子应用时优先取缓存中的地址，离开子应用时清掉缓存（很重要！1.子应用单独运行正常，基座加载子应用后接口404。

微前端micro-app

m0_43519765的博客

03-21

876

micro-app 是由京东零售 iPaaS 前端研发团队推出的一款微前端框架，它从组件化的思维，基于类 WebComponent 进行微前端的渲染，它旨在降低上手难度、提升工作效率，并且无关技术栈，也不和业务绑定，可以用于任何前端框架。

参与评论您还未登录，请先登录后发表或查看评论

micro-app的简单学习

笑到世界都狼狈的博客

05-01

4231

本文主要是在micro-app搭建的基础上，参照官网，对micro-app的基础学习，包含如下内容：配置项、生命周期、环境变量、JS沙箱、样式隔离、元素隔离、数据通信、静态资源、预加载、插件系统、多层嵌套、高级功能、路由、应用之间跳转、打包、部署

微前端之四 Micro App(京东)子应用讲解

我的世界我的光彩

04-03

3314

讲到这里，关于子应用1的讲解已经结束，子应用2参考子应用1实现即可。这里面之定义两个路由，一个是子应用的首页home，另一个是子应用的一个子页面page2.6、微前端环境下，注册mount和unmount方法，非微前端环境直接渲染。这里面有用到缓存参数GlobalData，我们需要预定义。4、配置接收由micro-app注入的全局变量。3、 子应用子页面page.vue。1、路由配置router.js。2、子应用首页home.vue。5、如何获取基座应用下发的消息。7、App.vue 入口。

关于微前端 micro-app 子项目二次路由跳转问题

byfate的博客

07-01

4291

业务原因，进入子项目时子项目主页需要根据基座传递的参数replace到不同的路由。（replace是方便返回到基座主页）问题是子项目页面后，返回到基座再进来，子项目在created或者mounted中调用this.$router.replace(url)时，router好像是以基座的地址进行跳转。解决办法，设置定时：...

micro-app【微前端系列教程】路由

朝阳39的博客

01-09

2547

在一些特殊情况下，主应用的跳转会导致浏览器地址上子应用信息丢失，此时可以主动调用方法，将子应用的路由信息同步到浏览器地址上。子应用同步到浏览器的路由信息是经过特殊编码的(encodeURIComponent + 特殊字符转译)和window.history.go(n)一致，表示在历史堆栈中前进或后退多少步。在子应用卸载后重新渲染时将恢复卸载前的页面（页面中的状态不保留）监听所有或某个子应用的路由变化，在子应用页面渲染前执行。监听所有或某个子应用的路由变化，在子应用页面渲染后执行。

使用router.push跳转到当前路由无反应（解决参考）

m0_54885949的博客

06-11

676

在Vue3中使用router.push跳转到当前路由无反应的代替方案参考

micro-app在vue-element-admin中的使用

05-07

本资源是在基于micro-app在vue-element-admin中的搭建之后对micro-app在vue-element-admin中的使用进行的进一步研究。主要包括：路由、页面之间的跳转、数据通信、样式隔离、元素隔离、资源共享、组件共享等的一些...

精选资源

Micro App框架Demo

04-03

【Micro App框架Demo】是一种基于前端技术实现的微应用架构示例，旨在帮助开发者理解和实践在大型项目中如何拆分和管理多个独立的应用模块。这种框架设计思路是将一个复杂的应用拆分成多个小型、可独立部署的子应用...

浅谈前端微服务背景及Micro-app的使用

friend_ship的博客

09-04

1774

微服务架构并不只是为了在架构上好看，还可以提升开发效率，尤其是庞大的应用系统，由单一应用拆分为多个小型前端应用，每个应用可以实现独立开发和独立部署，项目维护起来也会变得容易很多。

tinymce在keep-alive缓存中渲染错误的问题

nbclasszj的博客

06-15

296

解决：给富文本添加一个 v-if。

microApp子应用挂载两次，路由丢失问题

weixin_42202697的博客

03-27

452

microApp在使用过程中，每次刷新页面或者新进入页面，路由有几率会丢失，定向到`/{sub-app-name}`;排查发现microApp子应用挂载两次；

React 路由切换时同一组件无法重新渲染的解决方案

08-10

2179

React 路由切换时同一组件无法重新渲染的解决方案

【前端疑难杂症bug——路由跳转后，点击后退，地址栏有变化，页面没反应】

爪爪爪爪哇的博客

02-25

486

当我在router.beforeEach中拦截了路由守卫进行逻辑判断重定向的时候，利用了。

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

weixin_44441196的博客

03-31

3946

1.子应用点击回退路径错乱 // 在子应用（vue-router4）中添加如下设置：没有对路由堆栈state做唯一性标记，导致基座和子应用相互影响，vue-router3及其它框架路由没有类似问题 if (window.__MICRO_APP_ENVIRONMENT__) { // 如果__MICRO_APP_BASE_ROUTE__为 `/基座应用基础路由/子应用基础路由/`，则应去掉`/基座应用基础路由` // 如果对这句话不理解，可以参考案例：https://github.com/mi.

前端微服务MicroApp应用

qq_47452289的博客

01-11

4290

一个基于MicroApp的前端微服务基础使用以及nginx打包配置

微前端（micro-app）使用手册

StoneHui

06-25

5458

micro-app 是借鉴了 WebComponent 的思想，通过 CustomElement 结合自定义 ShadowDom，将微前端封装成一个类 WebComponent 组件，从而实现组件化。

微前端（二）—— micro-app （子应用接入）

qq_38133850的博客

10-18

2579

/ 是否在微前端环境中// 订阅主应用中分发过来的路由跳转if (!// 当主应用下发跳转指令时进行跳转});// 订阅主应用中的全局用户信息数据if (!// 向主应用分发路由-控制主应用的路由跳转if (!// 获取主应用路由// 控制主应用跳转// 路由跳转到详情页面 first:一级目录 route：路由path，query：参数} else {main.ts中引用。

微前端架构新选择：micro-app 框架一文全解析

知心宝贝的博客

10-24

4920

micro-app 是由京东前端团队推出的一款微前端框架，它借鉴了 WebComponent 的思想，通过 js沙箱、样式隔离、元素隔离、路由隔离模拟实现了 ShadowDom 的隔离特性，并结合 CustomElement 将微前端封装成一个类 WebComponent 组件，从而实现微前端的组件化渲染，旨在降低上手难度、提升工作效率。 micro-app 与技术栈无关，也不和业务绑定，可以用于任何前端框架。

micro-app标签url是子应用服务地址，还是子应用具体的页面地址

07-02

在 `micro-app` 中，`url` 属性通常指向**子应用的根服务地址**（即子应用的静态资源或入口文件的根路径），而不是具体的页面地址。它的作用是让 `micro-app` 从该地址加载子应用的静态资源（如 HTML、JS、CSS 等），并由子应用自行处理路由逻辑。 ### 关键点说明 1. **根服务地址**： - `url` 应为子应用的**基础路径**（如 `http://localhost:3000/`），而非具体页面（如 `http://localhost:3000/page1`）。 - 子应用需通过自身的路由（如 Vue Router、React Router）管理内部页面跳转。 2. **子应用配置**： - 子应用的构建工具（如 Webpack、Vite）需正确配置 `publicPath` 或 `base`，确保静态资源从 `url` 指向的路径加载。 - 例如，若子应用部署在 `http://localhost:3000/subapp/`，则 `publicPath` 应为 `/subapp/`。 3. **路由隔离**： - `micro-app` 通过 `baseroute` 属性将子应用的路由映射到主应用的 URL 中（如主应用访问 `/subapp/page1` 时，实际加载子应用的 `/page1`）。 - 子应用需监听 `window.location` 或使用路由库的 `base` 选项，以匹配 `baseroute` 路径。 ### 示例配置 ```html  <micro-app name="sub-app" url="http://localhost:3000/"  baseroute="/subapp"  ></micro-app> ``` ```javascript // 子应用的 Vue/React 路由配置（以 Vue Router 为例） const router = createRouter({ history: createWebHistory(), routes: [ { path: '/', component: Home }, // 访问 /subapp/ 时显示 { path: '/page1', component: Page1 }, // 访问 /subapp/page1 时显示 ], // 若子应用部署在非根路径（如 /subapp/），需配置 base // base: process.env.NODE_ENV === 'production' ? '/subapp/' : '/', }); ``` ### 常见问题 1. **若 `url` 指向具体页面地址**： - 可能导致子应用资源加载失败（如 JS/CSS 路径错误）。 - 子应用的路由跳转会失效，因为 `micro-app` 仅加载指定页面的资源，无法动态更新。 2. **若子应用未配置 `publicPath`/`base`**： - 静态资源可能返回 404 错误（如子应用尝试加载 `/app.js`，但实际路径应为 `/subapp/app.js`）。 ### 调试建议 - 检查浏览器 `Network` 面板，确认子应用的 JS/CSS 文件是否从 `url + publicPath` 路径加载。 - 确保子应用的路由库（如 Vue Router）的 `base` 或 `basename` 与 `baseroute` 一致。