2

我正在尝试在 Angular 8 中使用路由器和延迟加载。我之前已经在 Angular 7 中成功使用过它。
我有一些基本路线如下：

/home
/auth
/auth/login
/auth/signUp

我想/auth重定向到/auth/login其他一切重定向到/home.
为了做到这一点，我的app-routing.module.ts样子是这样的： 

const routes: Routes = [
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },
  {
    path: 'auth',
    loadChildren: () => import('./modules/auth/auth.module').then(m => m.AuthModule)
  },
  {
    path: 'home',
    loadChildren: () => import('./modules/home/home.module').then(m => m.HomeModule)
  },
  {
    path: '**',
    redirectTo: '/home',
    pathMatch: 'full'
  }
];

我的auth-routing.module.ts样子是这样的： 

const routes: Routes = [
  {
    path: '',
    redirectTo: '/auth/login',
    pathMatch: 'full'
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'signUp',
    component: LogoutComponent
  }
];

问题是它总是重定向到身份验证页面并忽略其他重定向。和路径/login也/signUp可以在根级别使用，这很奇怪，但它们也可以在带有前缀的情况下工作，/auth/login这更加奇特。

所以由于某种原因，这些路线似乎存在两次。此外，当我在路径中添加
前缀时，突然可以直接指向auth-routing.module.tsauth//auth/auth/login

我已经激活了 Angular 8 的所有必要功能，以使 ivy 和延迟加载工作。我定义的其他路由和惰性模块正在工作。

4

2 回答 2

2

您需要使用这样的相对重定向：

应用程序路由.module.ts

import {NgModule} from '@angular/core';
import {Route, RouterModule} from '@angular/router';
const routes: Route[] = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'auth',
    loadChildren: () => import('./modules/auth/auth.module').then(m => m.AuthModule)
  },
  {
    path: 'home',
    loadChildren: () => import('./modules/home/home.module').then(m => m.HomeModule)
  },
  {
    path: '**',
    redirectTo: 'home',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

auth-routing.module.ts

import {NgModule} from '@angular/core';
import {Route, RouterModule} from '@angular/router';
import { LoginComponent } from './login.component';

import { LogoutComponent } from './logout.component';
const routes: Route[] = [
  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full'
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'signUp',
    component: LogoutComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class AuthRoutingModule {
}

家庭路由.module.ts

import {NgModule} from '@angular/core';
import {Route, RouterModule} from '@angular/router';
import { HomeComponent } from './home.component';
const routes: Route[] = [
  {
    path: '',
    component: HomeComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class HomeRoutingModule {
}

有关工作示例，请参阅https://stackblitz.com/edit/angular-gmsgn2 。

于 2019-06-18T07:24:04.510 回答
1

确保您有 import AuthModule，并且HomeModule仅在app-routing.module.ts（作为延迟加载）。检查这些模块是否没有app.module.ts以正常（无延迟加载）方式导入内部。

于 2020-08-10T10:57:20.143 回答