Question

有些日子以来，我在Angular CLI和Routing方面遇到了这个问题。如果你指向确切的网址，它似乎工作正常。当您尝试使用routerLink重定向时，它会在URL中写入无限/＃页面。如果您在索引上并尝试转到关于页面，则会写入http://baseurl/index#/about#/index#/index#/index#/index#/index#/index#/index#/ ...并继续直到完成RAM：D

此问题仅适用于使用＆＃34; ng serve＆＃34;的devmode。（但与hashlocationstrategy一起使用）。在生产模式下似乎工作正常。

这里有一些代码。

index.html中的

<base href="/">

app.module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';

import { ConnectionService, ownerEnums, requestIdEnums } from './services/connection.service';
import { AuthService } from './services/auth.service';

import { AboutComponent } from './about/about.component';
import { ConnectComponent } from './connect/connect.component';
import { LayoutComponent } from './layout/layout.component';

import { HeaderComponent } from './layout/header/header.component';
import { BreadcrumbComponent } from './layout/breadcrumb/breadcrumb.component';
import { FooterComponent } from './layout/footer/footer.component';
import { IndexComponent } from './layout/index/index.component';

@NgModule({
  imports: [
    RouterModule.forRoot([
    { path: '', redirectTo: '/index', pathMatch: 'full' },
    { path: 'about', component: AboutComponent },
    { path: 'connect', component: ConnectComponent },
    { path: 'index', component: LayoutComponent }
    ]),
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  declarations: [
    AppComponent,
    AboutComponent,
    ConnectComponent,
    LayoutComponent,
    HeaderComponent,
    BreadcrumbComponent,
    FooterComponent,
    IndexComponent
  ],
  providers: [ ConnectionService, AuthService ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

在页面

中使用routerLink锚定

    <div>
        <a class="navbar-brand" [routerLink]="['/about']"><i class="fa fa-info"></i></a>
        <a class="navbar-brand" [routerLink]="['/connect']"><i class="fa fa-plug"></i></a>
    </div>

Answer 1

在路由模块的@NgMoudle中，添加{useHash：true}选项。这将解决问题，但是我不完全理解为什么。该选项旨在与旧版浏览器兼容，但我使用的是最新的Chrome。我在同一台PC上使用相同的浏览器编写了其他没有问题的角度项目，但是出现问题的代码似乎相同。我写这不是解决方案，但鉴于没有人回答过这个问题，我希望我的回答可以作为比我更好的人解释它发生的原因和原因的“线索”

@NgModule({
imports:[RouterModule.forRoot(appRoutes, {useHash: true})], 
exports:[RouterModule]
})

Answer 2

将路由器模块更改为

{ path: 'about', component: AboutComponent },
{ path: 'connect', component: ConnectComponent },
{ path: 'index', component: LayoutComponent },
{ path: '', redirectTo: 'index', pathMatch: 'full'},
{path:'**',redirectTo:'index',pathMatch:'full'}

Angular 4路由带有无限/＃/ url

2 个答案: