Angular 8 路由器不重定向到路由

Question

我的app.component.html:

<router-outlet></router-outlet>

我的app-routing.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { MenuComponent } from './components/menu/menu.component';
import { BlogComponent } from './components/blog/blog.component';
import { TeamComponent } from './components/team/team.component';

const routes: Routes = [
  { path: '', component: MenuComponent },
  { path: '**', component: MenuComponent },
  { path: 'menu', component: MenuComponent },
  { path: 'blog', component: BlogComponent },
  { path: 'team', component: TeamComponent }
];

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

当我在 url 中写入路线时（即 http://localhost:4200/blog) no error is given but I stay in the MenuComponent. Also when I refresh, the link stays http://localhost:4200/blog.

我是不是漏掉了什么？

P.S：如果需要任何代码，我可以编辑我的问题以显示它，不要立即投反对票:)

Answer 1

您需要对路由进行排序，路由器正在查找第一个匹配项，即您的菜单组件，试试这个。

const routes: Routes = [
  { path: 'menu', component: MenuComponent },
  { path: 'blog', component: BlogComponent },
  { path: 'team', component: TeamComponent },
  { path: '', component: MenuComponent },
  { path: '**', component: MenuComponent }
];

The order of the routes in the configuration matters and this is by design. The router uses a first-match wins strategy when matching routes, so more specific routes should be placed above less specific routes. In the configuration above, routes with a static path are listed first, followed by an empty path route, that matches the default route. The wildcard route comes last because it matches every URL and should be selected only if no other routes are matched first.

来自 angular 网站 here

Angular 8 路由器不重定向到路由

Angular 8 router not redirecting to routes

angular

angular2-routing

angular-routing

angular8