电子商务网站开发技术论文,asp网站后台源码,河南网站推广优化报价,导航网站优化参考链接qiankun官网#xff1a;微应用之间如何跳转#xff1f;
1.主应用、子应用路由都是hash模式 主应用根据 hash 来判断微应用#xff0c;无需考虑该问题
2.主应用根据path判断子应用
方法实现适用条件参数传递存在问题a标签跳转a href/toA/…参考链接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);
},
