Angular 6+未知URL路由处理及规则化重定向实现方案问询

没问题，我来教你怎么搞定这个需求！我们可以通过Angular的通配符路由配合自定义守卫，完美实现你要的规则化重定向逻辑。

核心思路 #

1. 用path: '**'通配符路由匹配所有未在应用中定义的URL
2. 编写一个自定义路由守卫，解析当前URL的最后一段路径
3. 对比预设的标识文本（alerts、users、products），映射到对应有效路由
4. 自动携带原URL的所有查询参数（如果有的话）完成重定向
5. 若未匹配到有效标识，则直接重定向到应用根路径

具体实现步骤 #

1. 创建自定义重定向守卫 #

你可以手动创建文件，或者用Angular CLI快速生成：

ng generate guard guards/unknown-route-redirect

然后把守卫代码改成下面这样：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, Router, UrlTree } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class UnknownRouteRedirectGuard implements CanActivate {
  // 这里配置标识文本和对应目标路由的映射，后续可以按需扩展
  private routeMap: Record<string, string> = {
    'alerts': '/MyAlerts',
    'users': '/Users',
    'products': '/products'
  };

  constructor(private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot): UrlTree {
    // 获取当前URL的所有路径段，过滤掉空字符串
    const pathSegments = route.url
      .map(segment => segment.path)
      .filter(segment => segment.trim() !== '');
    
    // 取最后一段路径作为判断标识
    const lastSegment = pathSegments.length > 0 ? pathSegments[pathSegments.length - 1] : '';

    // 检查是否匹配预设标识
    if (this.routeMap[lastSegment]) {
      // 携带原URL的查询参数和片段（hash）重定向
      return this.router.createUrlTree([this.routeMap[lastSegment]], {
        queryParams: route.queryParams,
        fragment: route.fragment
      });
    } else {
      // 无匹配标识，重定向到根路径
      return this.router.createUrlTree(['/']);
    }
  }
}

2. 配置通配符路由 #

打开你的应用路由模块（一般是app-routing.module.ts），把通配符路由放在所有路由的最后（重要！Angular路由是按顺序匹配的），并关联我们刚才创建的守卫：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { UnknownRouteRedirectGuard } from './guards/unknown-route-redirect.guard';
// 导入你的业务组件
import { MyAlertsComponent } from './my-alerts/my-alerts.component';
import { UsersComponent } from './users/users.component';
import { ProductsComponent } from './products/products.component';

const routes: Routes = [
  // 先配置你的正常业务路由
  { path: 'MyAlerts', component: MyAlertsComponent },
  { path: 'Users', component: UsersComponent },
  { path: 'products', component: ProductsComponent },
  
  // 通配符路由，匹配所有未定义的URL
  { 
    path: '**', 
    canActivate: [UnknownRouteRedirectGuard] 
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

效果验证 #

按照你的示例测试：

• 输入http://10.10.1.33:8080/MyApp/this/url/is/not/defined/alerts → 自动重定向到http://10.10.1.33:8080/MyApp/MyAlerts
• 输入http://10.10.1.33:8080/MyApp/this/url/is/not/defined/users → 自动重定向到http://10.10.1.33:8080/MyApp/Users
• 输入http://10.10.1.33:8080/MyApp/this/url/is/not/defined/products → 自动重定向到http://10.10.1.33:8080/MyApp/products
• 输入http://10.10.1.33:8080/MyApp/this/url/is/not/defined/ → 自动重定向到http://10.10.1.33:8080/MyApp/

如果原URL带有查询参数（比如.../alerts?id=123&status=active），重定向后会自动携带这些参数，完全符合你的需求。

注意事项 #

• 通配符路由必须放在所有路由的最后，否则会导致正常路由无法匹配
• 如果你的应用配置了自定义base href（比如/MyApp/），Angular会自动处理路径拼接，无需手动修改代码
• 后续需要新增标识文本时，只需要在守卫的routeMap对象里添加新的键值对即可，非常灵活

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