我在 angular 应用程序的浏览器中看不到任何路径

Question

我在浏览器中看不到任何路径，只有localhost:4200，这是什么原因呢?但我可以在应用程序中正常导航。我的路由。t是这样的

我使用Angular 12

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { VacComponent } from './modules/vac/vac.component';
import { VibComponent } from './modules/vib/vib.component';
import { CatComponent } from './modules/cat/cat.component';
import { LoginComponent } from './login/login.component';
const routes: Routes = [
{ path: '', redirectTo: 'login'},
{
path: 'login',
component: LoginComponent
},
{
path: 'dashboard',
component: DashboardComponent,
// canActivate: [AuthGuard]
},
{
path: 'vac',
component: VacComponent,
loadChildren: () => import('./modules/vac/vac.module').then(m => m.VacModule),
// canActivate: [AuthGuard]
},
{
path: 'vib',
component: VibComponent,
loadChildren: () => import('./modules/vib/vib.module').then(m => m.VibModule),
// canActivate: [AuthGuard]
},
{
path: 'cat',
component: CatComponent,
loadChildren: () => import('./modules/cat/cat.module').then(m => m.CatModule),
// canActivate: [AuthGuard]
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

Answer 1

我试着复制你的错误在Stackblitz没有成功。这是链接。我在你的例子中发现奇怪的是，你没有指定pathMatch到你的第一个重定向。我想这可能就是问题所在。

Answer 2

默认情况下，Angular编译器通过前缀匹配路由。因此，路由{ path: '', redirectTo: 'login'}将匹配routes数组中的所有后续路由。

另外，由于默认的路由匹配策略被设置为prefix，这基本上表明，Angular的Router将根据与前缀匹配的路径进行路由。您正在导航到的URL。并且由于每个路径都以"所有重定向"开头，将用户导航到/login组件。

因此，要解决这个问题，需要显式地将路由匹配策略更改为full。

const routes: Routes = [{
path: '',
redirectTo: '/login',
pathMatch: 'full'
},
...,
...,
];

正如pathMatch: full所指示的那样，Angular路由器需要匹配整个URL路径才能将用户路由到定向路径。

或

将包含pathMatch: prefix的路由定义移动到routes数组的底部，如下面的代码片段所示。

const routes: Routes = [
...,
...,
...,
{
path: '',
redirectTo: '/login',
pathMatch: 'prefix'
}
]