刷新路由正在使用 Angular 2 路由器重定向到默认路由答案

【问题标题】：on refresh route is directing to default route using angular2 router刷新路由正在使用 Angular 2 路由器重定向到默认路由
【发布时间】：2017-07-27 05:32:13
【问题描述】：

我正在使用 angular2 路由器为我的应用程序配置路由这是我的代码 sn-p。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { UpdateprofileComponent } from './updateprofile/updateprofile.component';
import { ChangepasswordComponent } from './changepassword/changepassword.component';
import { CookieService } from 'angular2-cookie/services/cookies.service';
import { PathLocationStrategy, LocationStrategy, HashLocationStrategy } from '@angular/common';

const routes = [
  {
    path: 'dashboard',
    component: DashboardComponent
  },
  { path: 'updateprofile', component: UpdateprofileComponent },
  { path: 'changepassword', component: ChangepasswordComponent },
  // Not found
  { path: '**', redirectTo: 'dashboard' }
];

@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent,
    UpdateprofileComponent,
    ChangepasswordComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    NgbModule.forRoot(),
    RouterModule.forRoot(routes, { useHash: true })
  ],
  providers: [CookieService],
  bootstrap: [AppComponent]
})
export class AppModule { }

header.component.html

<header>
   <select [(ngModel)]="userOperationType" (ngModelChange)="fnSetOperationType(userOperationType)" class="col-md-12 select-style">
                        <option value="dashboard">Account Administration</option>
                        <option value="changepassword" selected>Change Password</option>
                        <option value="updateprofile">Your Profile</option>
                    </select>
</header>

header.component.ts

import { Component, OnInit,Input } from '@angular/core';
import { UserDetailsService } from '../services/user-details.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
  providers: [UserDetailsService]
})
export class NvidiaHeaderComponent implements OnInit {


  constructor() { }


  fnSetOperationType(routeName) {
    this.route.navigate([routeName]);

  }
}

index.html

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Angular2Routing</title>
  <base href="./">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root>loading...
  </app-root>
  <script type = "text/javascript" >
history.pushState(null, null, '/#/dashboard');
window.addEventListener('popstate', function(event) {
history.pushState(null, null, '/#/dashboard');
});
</script>
</body>

</html>

这是我在 app.module.ts 中的路由。导航到更改密码路线后，我的网址是http://localhost:4200/#/changepassword。当我刷新我的页面或在新选项卡中打开此 url 时，我的 url 将重定向到 http://localhost:4200/#/dashboard（默认路由）。

刷新页面后我需要获得相同的路线，或者如果我将路线复制粘贴到另一个选项卡中，我需要获得相应的路线。

请帮助我。提前致谢。

【问题讨论】：

尝试从您的仪表板路径中删除默认使用。而不是转到您的通配符路径，路由器将使用作为默认配置
您使用 Apache 作为 Web 服务器吗？
@HassanFalahi Iam 不使用 Apache iam 只是使用 angular-cli 。 ng serve 完成了我的工作。

标签： javascript angular angular2-routing angular2-router

【解决方案1】：

尝试将默认路由重定向到您的仪表板，而不是 useAsDefault: true：

{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{
    path: 'dashboard',
    component: DashboardComponent,
    //useAsDefault: true //remove this
}

【讨论】：

我删除了 useAsDefault 但仍然没有使用 @mickdev
您在ChangepasswordComponent 中“手动”重定向了吗？你能编辑你的问题并提供它的代码吗？
也尝试更改路由器顺序，将 changepass... 放在仪表板之前，看看是否能解决您的问题。
确定我会更新我的问题并根据您的建议做出更改
@mikedev 我已经更新了我的问题，请看一下。更改路由顺序后也没有帮助我。

【解决方案2】：

我在 index.html 中犯了一个小错误。我已删除以下脚本。我用它来清除浏览器历史记录。

<script type = "text/javascript" >
history.pushState(null, null, '/#/dashboard');
window.addEventListener('popstate', function(event) {
history.pushState(null, null, '/#/dashboard');
});
</script>

它就像魅力一样！感谢您的帮助。:)

【讨论】：