角度路由未路由到组件答案

【问题标题】：Angular route not routing to the component角度路由未路由到组件
【发布时间】：2021-10-14 15:55:23
【问题描述】：

我很难找到上班的路线。我正在使用不会导航到路线的 RouterLink。我的 app.routing 有

const routes: Routes = [
{
  path: '',
  redirectTo: '/',
  pathMatch: 'full'
  },
  {
   path: '',
    component: LayoutComponent,
    loadChildren: () => import('./views/main/main.module').then( m => m.MainModule )
  }
];

mainModule 有以下内容

const routes: Routes = [
 {
  path: '',
  redirectTo: '/home',
  pathMatch: 'full'
},
{
 path: 'search',
 component: SearchFormComponent,
 loadChildren: () => import('../../views/search/search.module').then( m => m.SearchModule )
},
{
 path: '**',
 redirectTo: '/home',
 pathMatch: 'full'
}
];

mainModule 声明并导出 LayoutComponent

在 LayoutComponent.html 中

    <a class="nav-link" [routerLink]="'/search'">
      Search
    </a>

但是当我在 UI 中点击搜索时，路由并没有转到搜索组件。它停留在 Home 组件上。请帮忙 - 我哪里出错了？

【问题讨论】：

这能回答你的问题吗？ Angular 8 router not redirecting to routes
没有。订购路线不是问题。我只有两条路线。为什么找不到“搜索”路线
你的第一条路由是path: ''，你的第二条路由是path: 'search'，Angular路由器正在寻找你的第一条路径而不是去搜索。
@Malcor 当我的 routerLink 有 '/serach' 时，它如何找到'' 路由？无论如何，我尝试将''路线放在最后，但我仍然遇到同样的问题

标签： angular

【解决方案1】：

交换路线的顺序。

const routes: Routes = [
{
 path: 'search',
 component: SearchFormComponent,
 loadChildren: () => import('../../views/search/search.module').then( m => m.SearchModule )
},
 {
  path: '',
  redirectTo: '/home',
  pathMatch: 'full'
},
{
 path: '**',
 redirectTo: '/home',
 pathMatch: 'full'
}
];

Angular 路由器遵循先到先得的原则。

配置中路由的顺序很重要，这是设计使然。路由器在匹配路由时使用先匹配获胜策略，因此更具体的路由应该放在不太具体的路由之上。在上面的配置中，首先列出了具有静态路径的路由，然后是与默认路由匹配的空路径路由。通配符路由位于最后，因为它匹配每个 URL，并且只有在没有其他路由首先匹配时才应选择。

来自 Angular 网站here

正如here解释的那样

更新：虽然这仍然是一个问题，所以我会在此处留下原始答案。尝试将您的路由器链接设置为

   <a class="nav-link" [routerLink]="['search']">
      Search
    </a>

【讨论】：

很遗憾，因为我的 routerLink 有 '/search'，所以它不起作用
单击链接时控制台中是否有任何错误消息？
控制台中没有错误信息
我已经更新了答案
谢谢 - 不幸的是没有运气

【解决方案2】：

最后通过删除 '' 和 ** 并用替换它们来解决它

{
 path: '',
 component: HomeComponent,
},

【讨论】：