在确认路由是否正确的同时,还要注意路由的大小写。如果与组件名称匹配,则路由应该是小写字母,中划线分割。
示例代码:
const routes: Routes = [ { path: '', component: HomeComponent }, { path: 'about', component: AboutComponent }, { path: 'contact', component: ContactComponent }, { path: '**', component: NotFoundComponent} ];
在浏览器中输入的URL需要与路由的路径路径相匹配。这包括参数和查询字符串。
示例代码:
const routes: Routes = [ { path: '', component: HomeComponent }, { path: 'about', component: AboutComponent }, { path: 'contact/:id', component: ContactComponent }, { path: '**', component: NotFoundComponent } ];
Angular应用的基本路径在index.html文件的
示例代码:
如果路由无法匹配任何组件,则会显示404 Not Found。因此,需要检查是否已定义NotFoundComponent,并将其添加到路由中。
示例代码:
const routes: Routes = [ { path: '', component: HomeComponent }, { path: 'about', component: AboutComponent }, { path: 'contact', component: ContactComponent }, { path: '**', component: NotFoundComponent } ];
通过上述解决方法,可以解决Angular路由只显示404 Not Found的问题。