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

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

转载请说明出处内容投诉
CSS教程_站长资源网 » 【前端打怪升级日志之微前端框架篇】微前端qiankun框架子应用间跳转方法

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买