为什么我的 Angular 路由模块不能使用参数？

Question

我有以下路由模块：

const routes: Routes = [

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

  { path: 'x', component: xComponent},

  { path: 'x-d/:mid', component: xdComponent}

];

@NgModule({

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule]

})

export class AppRoutingModule { }

当我直接进入浏览器时，mywebsite/x它工作得很好，但是，如果我去mywebsite/x-d/5（任何 id 都应该在这里工作），它会给我一个错误 404。

我已经将我的 apache 配置为回退到index.htmlAngular 处理前端的所有内容，但是，带有参数的路由未正确加载。

我将我的.htaccess文件包含在下面的后备配置中，它是 Apache 的 Angular 文档的标准。

RewriteEngine On

# If an existing asset or directory is requested go to it as it is

RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]

RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d

RewriteRule ^ - [L]

# If the requested resource doesn't exist, use index.html

RewriteRule ^ /index.html

Answer 1

只是为了确认，您的实际 URL 路径不应包含id（或在您的情况下为mid ）并以 ' : ' 开头。它应该是例如mywebsite/x-d/23

Answer 2

我解决了。我正在使用以下命令运行我的构建脚本：sudo ng build --prod --base-href ./我所要做的就是删除点，如下所示：sudo ng build --prod --base-href /