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.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.component.html

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

的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>

的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

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

Answer 2

将配置router设置为useHash或制作网址rewrite。

按照命令解决此问题rewrite（管理状态）。

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

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

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

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

Answer 3

我相信您尚未将base元素添加到index.html。

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

<base href="/">

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

3 个答案: