角度路由失败

  • 本文关键字:失败 路由 angular
  • 更新时间 :
  • 英文 :


使用 angular cli 版本 8.3 构建了一个基本网页。

问题如下

例如: www.domainname.com 正在工作

如果我们浏览主页,www.domainname.com/basicprinciples 将起作用

但是,如果我们通过手动键入链接直接访问 www.domainname.com/basicprinciples,则不起作用。刷新时也会发生此问题。

我使用了侧导航角度材料设计,所有页面的内容都加载在侧导航内容区域内。内容div是通过使用应用程序主导航组件中的routerlink和ngif语句加载的。从基本原理组件开始,除了加载应用程序主导航组件之外什么都没有。

<mat-nav-list>
<a mat-list-item routerLink="/home" routerLinkActive="active">Home</a>
<a mat-list-item routerLink="/basicprinciples" routerLinkActive="active">Basic Principles</a>
</mat-nav-list>

和内容区域内的 ngif 如下

<div *ngIf="router.isActive('/basicprinciples')">
<div layout = "row" layout-xs = "column">
<div flex class = "box">
<h1 style="color:black;text-align:left;">Basic Principles</h1>
page content here........
</div>
</div>
</div>

和应用路由如下

const routes: Routes = [
{path:'' , component:HomeComponent},
{path:'home' , component:HomeComponent},
{path :'basicprinciples',component:BasicprinciplesComponent},
{path :'vpk',component:VpkComponent},
{path :'panchakoshas',component:PanchakoshasComponent},
{path :'detox',component:DetoxComponent},
{path :'btd',component:BtdComponent},
{path :'kbt',component:KbtComponent},
{path :'kmt',component:KmtComponent},
{path :'behindtheertham',component:BehindtheerthamComponent},
{path :'consultation',component:ConsultationComponent},
{path :'sptreatments',component:SptreatmentsComponent},
{path :'contact',component:ContactComponent},
];

不知道,我是否走在正确的道路上。 如果我错了,请指导我。希望我的问题清楚。 感谢帮助。

我认为您的Web服务器认为它是一个文件夹,找不到该文件夹。相应地配置服务器,也可以打开哈希路由。

const config: ExtraOptions = {
useHash: true,
};
@NgModule({
imports: [RouterModule.forRoot(routes, config)],
exports: [RouterModule],
})
export class AppRoutingModule {
}

最新更新