Question

我需要角度路由器将以给定前缀开头的任何路径匹配到组件。这是我的路由器配置。

  {
    path: 'posts/:id/:title',
    component: PostDetailsComponent
  }

当我使用/posts/1/json-web-token-(jwt)-authentication-with-asp.net-core-2.0导航到router.navigate()之类的路线时，一切正常，但是一旦尝试刷新页面，就会弹出错误消息

 Cannot match any routes. URL Segment: 'jwt'
   Error: Cannot match any routes. URL Segment: 'jwt'
    at ApplyRedirects.noMatchError (router.js:1719)

我尝试了推荐的here解决方案，但在我的特定情况下似乎不起作用。我也尝试过将路由器配置更改为：

  {
    path: 'posts/:id/**',
    component: PostDetailsComponent
  }

但这只是在构建时出错了。我有什么办法可以匹配以/posts/:id/开头的任何路线？

Answer 1

如果您确实想在特定前缀后匹配任何路由，则需要在 catchAll 中使用特殊'**' catchAll 子路线：

{
    path: 'posts',
//or with :id
//  path: 'posts/:id',
    children: [
      path: '**',
      component: PostDetailsComponent
    ]

}

这将匹配所有带有“前缀” posts的路由，例如posts/8634986/json-in-urls-rockz-or-not 或 {{ 1}}。

但是，您会失去很多Angular Router的魔力： params ，依此类推。此外，它当然仅适用于 valid （就Angular Router认为是 valid 而言）URL。要实际访问URL，您将需要使用posts/my/path/is/longer/than/yours。

Answer 2

我认为我偶然发现了一个解决方案。我从title中删除了所有特殊字符，并用连字符代替了空格。这是我的网址生成逻辑的外观：

const cleanTitle = title.toLocaleLowerCase()
  .replace(/\s\s+/g, '-') // replace duplicate whitespace with hyphen
  .replace('(', '')
  .replace(')', '');
this.router.navigate([`/posts/${id}/${cleanTitle}`]);

此后，路由配置开始匹配/posts/1/json-web-token-jwt-authentication-with-asp.net-core-2.0之类的网址

Angular 2路由：匹配具有给定前缀的任何路径

2 个答案: