404 与角参数路由

Question

我在 Angular 中的参数路由方面遇到了一个非常奇怪的问题。如果我在 Stackblitz 中编码它，它可以工作，但在本地我收到错误 404。

app.module.ts

import { RoutingModule } from './routing.module';
import { ConfirmEmailComponent } from './confirm-email/confirm-email.component';

@NgModule({
imports:      [
RoutingModule,
],
declarations: [ ConfirmEmailComponent],
)}

routeting.module.ts

import { ConfirmEmailComponent } from './confirm-email/confirm-email.component';
const routes: Routes = [
{ path: "activate/:uid/:token", component: ConfirmEmailComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class RoutingModule { }

在确认电子邮件组件中

import { Router, ActivatedRoute, ParamMap } from '@angular/router';
import { HttpClient } from '@angular/common/http';
constructor(
private http: HttpClient, 
private route: ActivatedRoute,
) { }
ngOnInit() {
this.uid = this.route.snapshot.paramMap.get("uid");
this.token = this.route.snapshot.paramMap.get("token");
}

我也尝试订阅，但我遇到了同样的问题。其他路线工作正常。

所以我转到root/activate/a/b，出现错误"http://localhost:4200/activate/ab/runtime.js net：：ERR_ABORTED 404(未找到(">

如果我将以下行添加到路由器，则没有错误404，但当然没有uid或令牌。

{ path: "activate", component: ConfirmEmailComponent },

我不明白 Stackblitz (https://angular-tufqi9.stackblitz.io/( 和本地之间有什么变化。知道吗？

编辑： 我做了一些补充测试。 如果我在浏览器的网址栏中输入地址，仍然是同样的问题。所以 http://localhost:4200/activate/abc/edf。

但是，如果我将按钮链接到其中之一

this.router.navigate(['activate', "abc", "edf"]);

或

this.router.navigateByUrl('activate/abc/edf');

然后它起作用了。奇怪的是，如果我做F5，问题又回来了。

在浏览器中输入 URL 和 this.router.navigate 有什么区别？

Answer 1

检查你的索引.html 将基本 HRF 更改为：

<base href="/">