当前位置:首页 > 编程笔记 > 正文
已解决

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

来自网友在路上 182882提问 提问时间:2023-09-27 07:39:49阅读次数: 82

最佳答案 问答题库828位专家为你答疑解惑

参考链接
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);
},

查看全文

99%的人还看了

猜你感兴趣

版权申明

本文"【前端打怪升级日志之微前端框架篇】微前端qiankun框架子应用间跳转方法":http://eshow365.cn/6-14501-0.html 内容来自互联网,请自行判断内容的正确性。如有侵权请联系我们,立即删除!