Angular中如何忽略指定子路由？解决主应用与/blog路由冲突

核心思路是让主应用路由系统忽略/blog及其子路径，将这些路径的控制权交还给服务器，从而加载独立部署的/blog应用。具体有两种实现方式：

方式一：使用空组件触发硬导航 #

1. 在主应用的路由配置中，在通配符路由前添加/blog的路由规则：

   const routes: Routes = [
     // 你的其他主应用路由...
     {
       path: 'blog',
       pathMatch: 'prefix',
       component: RedirectToExternalComponent
     },
     { path: '**', redirectTo: '/' }
   ];
   

2. 创建空组件RedirectToExternalComponent，用于触发浏览器硬导航：

   import { Component, OnInit } from '@angular/core';
   import { Router } from '@angular/router';
   
   @Component({ template: '' })
   export class RedirectToExternalComponent implements OnInit {
     constructor(private router: Router) {}
   
     ngOnInit(): void {
       // 强制浏览器发起新请求，交由服务器处理/blog路径
       window.location.href = this.router.url;
     }
   }
   

方式二：使用路由守卫（更简洁） #

1. 创建路由守卫BlogRedirectGuard：

   import { CanActivate } from '@angular/router';
   
   export class BlogRedirectGuard implements CanActivate {
     canActivate(): boolean {
       window.location.href = '/blog';
       return false; // 阻止Angular继续处理该路由
     }
   }
   

2. 在路由配置中引入并使用该守卫：

   const routes: Routes = [
     // 你的其他主应用路由...
     {
       path: 'blog',
       pathMatch: 'prefix',
       canActivate: [BlogRedirectGuard]
     },
     { path: '**', redirectTo: '/' }
   ];
   

关键注意点 #

• 路由规则顺序必须正确：/blog的路由要放在通配符路由之前，因为Angular路由是按顺序匹配的，先匹配的规则优先生效。
• 必须使用window.location.href而非Angular的router.navigate，前者会触发服务器请求，让服务器返回独立的/blog应用；后者是客户端路由，仍会被主应用拦截。

内容的提问来源于stack exchange，提问作者sakos95