角度无法匹配路线答案

【问题标题】：angular cannot match routes角度无法匹配路线
【发布时间】：2021-02-09 05:02:53
【问题描述】：

我想在带有 rounterlinks 的 Angular 应用程序中创建一个菜单。我的路由器链接看起来是这样的：

          <li>
            <a routerLink="/overview" [queryParams]="{categorie:'Shopping',subcategorie:'topcategorie'}">
              Shopping</a>
          </li>

如果我点击按钮，我会收到以下错误。

core.js:6241 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'overview'
Error: Cannot match any routes. URL Segment: 'overview'
    at ApplyRedirects.noMatchError (router.js:4389)
    at CatchSubscriber.selector (router.js:4353)
    at CatchSubscriber.error (catchError.js:29)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at ThrowIfEmptySubscriber._error (Subscriber.js:75)
    at resolvePromise (zone-evergreen.js:798)
    at resolvePromise (zone-evergreen.js:750)
    at zone-evergreen.js:860
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:41634)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at drainMicroTaskQueue (zone-evergreen.js:569)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:484)
    at invokeTask (zone-evergreen.js:1621)

我的路由器定义如下：

const routes: Routes = [

  { path: 'overview/:categorie/:subcategorie', component: OverviewComponent },
  { path: 'overview/:brand', component: OverviewComponent },
  { path: 'overview/:product', component: OverviewComponent },
  { path: 'coupons', component: CouponComponent },
  { path: 'impressum', component: ImpressumComponent },
  { path: 'datenschutz', component: DatenschutzComponent },
  { path: 'details/:id', component: ProductDetailsComponent },
  { path: 'home', component: LandingpageComponent },
  { path: '', component: LandingpageComponent }
];

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

有人知道我为什么会收到此错误吗？

【问题讨论】：

标签： html angular href routerlink

【解决方案1】：

这是因为您正在设置 queryParams 而不是使用您设置的路线。链接到routerLink="/overview/shopping/topcategorie"（如果您希望/overview 工作{ path: 'overview', component: StackOverflowComponent }（或重定向到默认类别/品牌/产品路线）

（a 标签现在链接到overview?categorie=Shopping&subcategorie=topcategorie）

【讨论】：

【解决方案2】：

试试这个方法：

<a [routerLink]="['/overview', 'Shopping', 'topcategorie']">Shopping</a>

【讨论】：

【解决方案3】：

改用这个：

<a [routerLink]="['overview', 'Shopping', 'topcategorie']">
   Shopping
</a>

或

<a routerLink="overview/Shopping/topcategorie">
   Shopping
</a>

【讨论】：

【解决方案4】：

在应用路由模块中，您尚未声明符合您要求的路由。您已经在路由模块中声明了路径变量

  { path: 'overview/:categorie/:subcategorie', component: OverviewComponent },
  { path: 'overview/:brand', component: OverviewComponent },
  { path: 'overview/:product', component: OverviewComponent },

但您正在尝试 HTML 中的查询参数。

<a routerLink="/overview" [queryParams]="{categorie:'Shopping',subcategorie:'topcategorie'}">
              Shopping</a>

尝试使用以下实现。

在.ts中

{ path: 'overview', component: OverviewComponent },

在 .HTML 中

 <a [routerLink]="/overview" [queryParams]="{categorie:'Shopping',subcategorie:'topcategorie'}">
                  Shopping</a>

生成的 URL 将是

overview?categorie=Shopping&subcategorie=topcategorie

以上是查询参数。

【讨论】：