代码之家 › 专栏 › 技术社区 › Test Coder

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

angular-ui-router angular

Test Coder · 技术社区 · 7 年前

如果单击任何锚定标记,则路由工作正常。只有当用户在地址栏上手动键入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。路由器。输电系统

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。组成部分html

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

src/app/shared/top-navigation/top-navigation。组成部分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>

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

3 回复 | 直到 7 年前

Rach Chen 7 年前

设置配置 router 到 useHash 或生成url 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),]

stojevskimilan 7 年前

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

-1

Epsilon 7 年前

base 元素添加到索引中。html。

根据Angular文档,您应该添加一个 <base>

<base href="/">