如何在Angular中设置默认路由？访问/home路径页面无法显示的路由配置问题求助

Problem Description #

我在配置默认路由时遇到了问题：当访问sitename.com时，系统会自动跳转到默认的Login路由，即sitename.com/login，这部分功能正常。但当我通过sitename.com/home的快捷方式访问页面时，页面无法显示，仿佛找不到该路径。我希望将/home路径也重定向到默认的Login页面，请问是否需要通过配置路由来实现，还是需要其他操作？恳请各位提供帮助。

Relevant Code from app.module.ts #

import { RouterModule, Routes } from '@angular/router';
imports: [
  RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' }),
],
const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
];

Solution #

嘿，这个需求完全可以通过调整路由配置来实现，不用额外操作~

你当前的路由里，{ path: 'home', component: HomeComponent }是指定/home路径加载HomeComponent，但你说页面无法显示，大概率是HomeComponent没有正确配置（比如没在模块里声明），不过既然你想把/home重定向到登录页，直接修改这条路由规则就好：

把原来的home路由替换成重定向规则，和根路径的配置逻辑一致：

const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  // 修改这里：把/home重定向到login
  { path: 'home', redirectTo: 'login', pathMatch: 'full' },
  // 重要提醒：你当前的路由配置里缺少Login组件的路由！
  // 根路径重定向能生效是因为Angular会保留重定向状态，但实际访问/login时会找不到组件，一定要补上这条
  { path: 'login', component: LoginComponent },
];

几点小说明：

• pathMatch: 'full'是必须的，它确保只有当完整路径完全匹配/home时才触发重定向，避免出现部分匹配导致的异常跳转
• 别忘了添加LoginComponent的路由规则，否则即使重定向到/login，页面也会显示找不到组件的错误

如果之后你又需要让/home正常加载HomeComponent，再把这条路由改回原来的配置就可以啦。

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