首页 > 其他分享 >微前端中路由的跳转

微前端中路由的跳转

时间:2023-05-18 16:35:11浏览次数:43  
标签:中路 基座 路由 应用 跳转 Router 前端 mainRouter

微前端中路由的跳转

针对基座与子应用都是Angular 的场景,实现应用间的路由跳转

基座往子应用的跳转

  • 首先在路由中要定义一个空组件来承接子路由,可以在基座路由表中添加如下路由
{
    path: 'subapp', children: [
      { path: '**', component: EmptyComponent }
    ]
}

@Component({
  selector: 'Empty-Component',
  template: '',
})
export class EmptyComponent { }

子应用跳回基座或者其他子应用

  • 由于我们在改写了子应用的APP_BASE_HREF,所以,我们无法调到subapp的上一层,Angular 路由系统如果是LocationStrategy,实际是可以做到的。如果是useHash的模式,是做不到的
@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule],
  providers: [{ provide: APP_BASE_HREF, useValue: '/subapp' }]
})
export class AppRoutingModule { }
  • 如何解决这个问题?
    • 使用window.location.href=mainapp,这个方式会导致页面重载,状态丢失。会有白屏,也就失去了微前端的意义。不推荐
    • 如果我们的路由采用的是路由系统如果是LocationStrategy,也就是路由长这样http://hostname:port/path1/subpath,我们可以通过采用window.history.pushState(stateObj,'',relativeURL)的方式来解决。页面不会发生重载
    • 我们可以将主应用的路由传递给子应用。这样子应用直接用这个路由来跳转。爽歪歪。做法如下
      • 主应用组测微应用的组件里面,一般是app.component.将Router作为属性传递给子应用。
constructor(private router:Router){}
registerMicroApps(microApps.map(it => ({ ...it, props: { mainRouter: this.router } })),{beforeLoad,beforeMount,afterMount,afterUnmount})
- 在子应用的main.ts 中,在**bootstrapFunction**中拿到这个**mainRouter**,将这个插入到Angular 的DI中。
const mainRouteToken = new InjectionToken<Router>('mainRouter');
bootstrapFunction(singspaProps){
  const mainRouter = (singspaProps as any)['mainRouter'];
  return platformBrowserDynamic([{ provide: mainRouteToken, useValue: mainRouter }]).bootstrapModule(AppModule);
}
- 然后在我们的子应用中注入这个router
  constructor(@Inject(mainRouteToken) private mainRouter: Router,){}
  gohome(){this.mainRouter.navigate();}

标签:中路,基座,路由,应用,跳转,Router,前端,mainRouter
From: https://www.cnblogs.com/kongshu-612/p/17412343.html

相关文章

  • 前端规范文档( 摘自阿里研发中心 )
     前端代码规范规范的目的是为了编写高质量的代码,让你的团队成员每天得心情都是愉悦的,大家在一起是快乐的。引自《阿里规约》的开头片段:----现代软件架构的复杂性需要协同开发完成,如何高效地协同呢?无规矩不成方圆,无规范难以协同,比如,制订交通法规表面上是要限制行车权,实际上......
  • 前端工作小结1-拦截器的使用
    1.拦截器综述拦截器的功能是定义在Java拦截器规范。拦截器规范定义了三种拦截点:业务方法拦截,生命周期回调侦听,超时拦截(EJB)方法。在容器的生命周期中进行拦截   publicclassDependencyInjectionInterceptor{      @PostConstruct      publicvoidi......
  • flask_前端继承
      外部引入一段代码,include    ......
  • 前端-Vue语法使用
    ES6做为动态语言,感觉底层开始-基本类型就全引用。做为实例化的变量,也变得像指向指针的指针,可以随时切换指针,从而最终的数据类型也更着切换总的来说概念上会比较别扭。以及灵活导致的不确定性。底层都是对象,从对象的类型来搭建。基本类型\ PrimitivevalueUndefined,Null,Boo......
  • dw代码跳转
    <html><style type="text/css">img{width: 200px;height: 200px;}</style><script language="JavaScript" type="text/javascript">function fn(n){var nextn;if(n==3){nextn=1;}else{nextn=n+1;}document......
  • 最近遇到的一个问题 后端写好的接口,前端怎么获取数据
    这是我后端的接口:GET接口这是我前端运行的项目地址:简单使用:咱门前端使用颇受好评的axios来发起请求这是它的官网:https://www.axios-http.cn/不过要在vue中使用它,就需要先安装打开终端输入一下命令 npminstallaxios然后在需要使用的页面<script>中标签引入a......
  • Nginx 常用的基础配置(web前端相关方面)
    基础配置userroot;worker_processes1;events{worker_connections10240;}http{log_format'$remote_addr-$remote_user[$time_local]''"$request"$st......
  • 前端-VUE
    工程化这里要从node.js开始。node.js要弄一个基于事件驱动、非阻塞I/O的的web服务,发现V8引擎+JavaScript很合适。这样Js就能直接写后端应用。然后发展成作为本地的运行容器(类似jdk),将js导入到了本地运行领域。以此位基础,发展出了生态环境,里面关系挺绕的,各种轮子,互相占位。......
  • VUE前端随笔计2
    又是小白记录问题的一次,老规矩,还是抄别人的代码来改。 在表标签中找到了一个点击事件定位代码,对比别人的,发现自己的删多了,把这个补充回去就行了,具体意思不太明白,大概是给这个模型里面填充这行数据。 ......
  • 简单聊两句前端模块化
    在前端开发中,模块化是一种将代码拆分为独立模块的开发方法。它通过将功能相似或相关的代码组织成可复用、可维护的模块,以提高开发效率和代码质量。模块化的主要目的是解决传统的JS开发存在的问题,例如全局命名冲突、代码复用困难、依赖管理混乱等。通过模块化,可以将代码拆分为独立......