参考链接
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. 在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);
},
```
版权归原作者 一只小傲娇 所有, 如有侵权,请联系我们删除。