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