【前端打怪升级日志之微前端框架篇】微前端qiankun框架子应用间跳转方法

news/2024/10/21 5:33:47/

参考链接
qiankun官网:微应用之间如何跳转?

1.主应用、子应用路由都是hash模式

   主应用根据 hash 来判断微应用,无需考虑该问题

2.主应用根据path判断子应用

方法实现适用条件参数传递存在问题
a标签跳转<a href="/toA"></a>页面重新刷新,原来的状态丢失,用户体验不好
h5提供的history.pushState()方法

history.pushState(state, title[, url])

详见:history.pushState()

微应用的路由模式为histroy

传参:通过state状态对象

取参:history.state

不够优雅和友好

通过props调主应用的路由实例,主应用再去匹配分发到子应用路由在子应用注册时将主应用的路由实例对象传过去,子应用挂载到全局,用主应用的router 跳转。router传参和取参
  • 通过 js 跳转,跳转的链接无法使用浏览器自带的右键菜单(如:Chrome 自带的链接右键菜单)

  • 多层嵌套子应用是否会出问题?

single-spa提供的navigatorToUrl方法
// 1. 在qiankun.js文件中通过Vue提供的provide选项为所有子应用引入singleSpa依赖
function render(props = {}) {const {singleSpa,} = props;instance = new Vue({provide: {singleSpa,},render: h => h(App),}).$mount(container ? container.querySelector('#app') : '#app');
}// 2. 在子应用中调用this.singleSpa.navigateToUrl(`${url}?params`)进行页面跳转并通过URL传参,实例如下:function jumpToOthers(params){this.singleSpa.navigateToUrl(url);
},


http://www.ppmy.cn/news/1116521.html

相关文章

Dubbo3应用开发—XML形式的Dubbo应用开发和SpringBoot整合Dubbo开发

Dubbo3程序的初步开发 Dubbo3升级的核心内容 易⽤性 开箱即⽤&#xff0c;易⽤性⾼&#xff0c;如 Java 版本的⾯向接⼝代理特性能实现本地透明调⽤功能丰富&#xff0c;基于原⽣库或轻量扩展即可实现绝⼤多数的 微服务治理能⼒。更加完善了多语言支持&#xff08;GO PYTHON R…

前端实现打字效果

前端实现打字效果 不带光标 只一次播放 HTML <!-- 需要在初始化的时候不显示文字 --> <div id"typing"></div>CSS #typing {position: relative;font-size: 24px;font-family: Arial, sans-serif;padding: 10px; }JS const text "要显…

LeetCode 78 子集

1、在使用回溯算法时&#xff0c;循环中&#xff0c;对于数组和字符串的处理是不一样的 数组是在回溯时indexi1&#xff0c;而字符串是在循环时便加1&#xff0c;然后回溯使用的indexi。&#xff08;子集使用的是i1&#xff09; 2、似乎使用new ArrayList<>(LinkedList…

大数据Hadoop高可用

HA高可靠集群 hdfs中的HA搭建&#xff1a; 三个namenode如何保证数据一致&#xff1f; fsimage: 更新频率低, 由一台进行修改&#xff0c;剩下的所有机器进行同步edits: 更新频率高&#xff0c;JN日志节点&#xff08;hadoop的专属zk&#xff0c;只做数据全局一致性保证&…

MySQL 某个字段存储不了内容

1. 原因 某个字段存储的内容过大 2. 解决 修改max_allowed_packet参数 max_allowed_packet参数是指mysql服务器端在一次传送数据包的过程当中最大允许的数据包大小。如果超过了设置的最大长度&#xff0c;则会数据库保持数据失败。 2.1 查询参数 show variables like %max…

数据库计算机三级等级考试--数据库技术相关知识点和笔记

数据库计算机三级等级考试–数据库技术 计算机三级等级考试笔记,是博主通过计算机三级数据库技术考试的相关笔记&#xff0c;此篇博客&#xff0c;不仅适合需要考计算机三级考试的各位考生&#xff0c;也适合在职场处理关于数据库的部分操作&#xff0c;个人认为算是一篇使用性…

Angular变更检测机制

前段时间遇到这样一个 bug&#xff0c;通过一个 click 事件跳转到一个新页面&#xff0c;新页面迟迟不加载&#xff1b; 经过多次测试发现&#xff0c;将鼠标移入某个 tab &#xff0c;页面就加载出来了。 举个例子&#xff0c;页面内容无法加载&#xff0c;但是将鼠标移入下图…

图解 LeetCode 算法汇总——二分查找

二分查找&#xff08;Binary Search&#xff09;是一种在有序数组中查找特定元素的高效算法。它的基本思想是将目标值与数组中间的元素进行比较&#xff0c;如果目标值小于中间元素&#xff0c;则在数组的左半部分继续查找&#xff0c;否则在右半部分查找&#xff0c;不断缩小搜…