如何在Angular中实现URL不可修改？强制跳转至指定页面

步骤1：创建NotificationPage组件（若未创建） #

先通过Angular CLI生成对应的页面组件：

ng generate component notification-page

步骤2：修改app-routing.module.ts配置路由 #

将路由配置修改为以下内容，通过通配符路由捕获所有未匹配路径，强制重定向到目标页面：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
// 导入生成的组件
import { NotificationPageComponent } from './notification-page/notification-page.component';

const routes: Routes = [
  // 配置目标页面的路由规则
  { path: 'notification-page', component: NotificationPageComponent },
  // 通配符路由：匹配所有未被定义的路径，重定向到目标页面
  { path: '**', redirectTo: 'notification-page', pathMatch: 'full' }
];

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

关键说明 #

• path: '**'：Angular路由的通配符规则，会匹配所有未被前面路由覆盖的路径
• redirectTo: 'notification-page'：指定重定向的目标路径
• pathMatch: 'full'：确保只有当完整路径匹配通配符时才触发重定向，避免路由匹配异常

最后检查 #

确认app.component.html中存在路由出口标签<router-outlet></router-outlet>，否则目标组件内容无法渲染。

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