在地址栏上键入的任何URL都会导航回Angular 4中的根URL

Question

在地址栏上键入的任何URL都会导航回Angular 4中的根URL

如果单击任何锚标记,则路由工作完美.仅当用户手动键入地址栏上的URL时才会出现此问题

例如,如果sign in link从网页的顶部导航栏单击一次,则angular正确加载sign in component,但如果用户键入http://localhost:4200/sign-in,则加载home component

规格

Ubuntu 17.10节点6.11.4 NPM 5.5.1

该应用程序的代码如下

SRC /应用程序/ app.router.ts

import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { SignUpComponent } from './sign-up/sign-up.component';
import { SignInComponent } from './sign-in/sign-in.component';
import { HomeComponent } from './home/home.component';
import { Route } from '@angular/router';

export const routes: Route[] = [
  { path: 'sign-up', component: SignUpComponent},
  { path: 'sign-in', component: SignInComponent},
  { path: 'admin', pathMatch: 'full', loadChildren: 'app/admin/admin.module#AdminModule'},
  { path: 'dashboard', loadChildren: 'app/user/user.module#UserModule'},
  { path: '', pathMatch: 'full', component: HomeComponent},
  { path: '**', pathMatch: 'full', component: PageNotFoundComponent}
];

Run Code Online (Sandbox Code Playgroud)

SRC /应用程序/ app.component.html

<top-navigation></top-navigation>
<router-outlet></router-outlet>

Run Code Online (Sandbox Code Playgroud)

SRC /应用/共享/顶导航/顶navigation.component.html

<nav class="navbar navbar-expand-lg navbar-light">
  <a class="navbar-brand" href="#">RS</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText"
    aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  <div class="collapse navbar-collapse" id="navbarText">
    <ul class="navbar-nav mr-auto">
      <li *ngIf="isLoggedIn" class="nav-item">
          <a class="nav-link" [routerLink]="['/dashboard']" >Dashboard</a>
      </li>
    </ul>

    <!-- SIGNED IN USER -->
    <div *ngIf="isLoggedIn" class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        {{currentUser.username}}
      </a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
        <a class="dropdown-item" routerLink="/me" routerLinkActive="active">Me</a>
        <a class="nav-link disabled" href="#">Disabled</a>
        <a class="nav-link" (click)="authService.logout()">Logout</a>
      </div>
    </div> <!-- [/END] SIGNED IN USER -->

    <!-- NO USER -->
    <div *ngIf="!isLoggedIn" class="nav-item">
      <a class="nav-link" [routerLink]="['/admin']">Sign In</a>
    </div>

  </div>
</nav>

Run Code Online (Sandbox Code Playgroud)

SRC/index.html的

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <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></app-root>

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

</body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Rac*_*hen 2

将配置设置router为 useHash或创建 url rewrite。

\n\n

按照命令解决这个情况rewrite（管理状态）。

\n\n

$ npm install http-server -g\n$ npm install -g spa-http-server\n$ http-server --push-state\n# \xe2\x86\x91 it would solve the state flush problem.\n

Run Code Online (Sandbox Code Playgroud)\n\n

另一种方法是{useHash:true,enableTracing:true}在您的RouterModule配置中使用。

\n\n

config = {useHash:true,enableTracing:true};\n\nimports:[RouterModule.forRoot(routes,config),]\n

Run Code Online (Sandbox Code Playgroud)\n

归档时间：	8 年，8 月前
查看次数：	1827 次
最近记录：	8 年，8 月前