码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • 【前端打怪升级日志之微前端框架篇】微前端qiankun框架子应用间跳转方法


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

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

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

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

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

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

    详见:history.pushState()

    微应用的路由模式为histroy

    传参:通过state状态对象

    取参:history.state

    不够优雅和友好

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

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

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

  • 相关阅读:
    linux nuget packages path
    梳理RWKV 4,5(Eagle),6(Finch)架构的区别以及个人理解和建议
    基于深度学习的物体材质预测
    14天阅读挑战赛(认识算法的特性)
    iview的表格实现单元格行编辑功能
    ChatGPT 学习笔记 - 1
    Linux 忘记密码解决方法
    android studio cmake生成.a文件(静态库)及调用(c c++)静态库.a
    fegin 单客户端配置类方式设置配置
    《LeetCode力扣练习》代码随想录——数组(二分查找---Java)
  • 原文地址:https://blog.csdn.net/weixin_43522685/article/details/133032403
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号