在地址栏中键入的任何 url 都会导航回 Angular 中的根目录 url 4

Question

如果单击任何锚标记，路由将完美运行。仅当用户在地址栏

上手动键入 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/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}
];

src/app/app.component.html

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

src/app/shared/top-navigation/top-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>

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>

Answer 1

我相信您还没有将 base 元素添加到您的 index.html 中。

根据 Angular 文档，您应该向 index.html 添加一个 <base> 元素作为标记中的第一个子元素，以告诉路由器如何组成导航 URL。

<base href="/">

Answer 2

这不是您的问题所特有的，但您应该从链接中删除 href="#"。你能试试这个吗？而不是 { path: '', pathMatch: 'full', component: HomeComponent}, 像这样尝试 { path:'home', component: 'HomeComponent' } { path: '', redirectTo: 'home', pathMatch: 'full' }.

Answer 3

将配置 router 设置为 useHash 或使 url rewrite.

按照命令解决此情况rewrite（管理状态）

$ npm install http-server -g
$ npm install -g spa-http-server
$ http-server --push-state
# ↑ it would solve the state flush problem.

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

config = {useHash:true,enableTracing:true};

imports:[RouterModule.forRoot(routes,config),]

在地址栏中键入的任何 url 都会导航回 Angular 中的根目录 url 4

Any url typed on the address bar navigates back to the root url in Angular 4

angular

angular-ui-router