默认路由不起作用 [Angular4]答案

【问题标题】：Default routing is not working [Angular4]默认路由不起作用 [Angular4]
【发布时间】：2018-08-10 02:47:47
【问题描述】：

我厌倦了任何事情，但它只发生在这个项目中。我使用了相同的路由代码，但默认路由不起作用。我需要修复代码还是需要修复其他地方？

这段代码在app.moules.ts：

export const AppRoutes: Routes = [
    {
        path: '',
        redirectTo: '/login',
        pathMatch: 'full'
    }, {
        path: '',
        component: AdminLayoutComponent,
        children: [
            {
                path: 'main',
                component: MainComponent,
                data: {
                    breadcrumb: 'Main',
                    status: true
                }
            }, {
                path: 'userterminal',
                loadChildren: './userterminal/userterminal.module.ts#UserTerminalModule'
            }, {
                path: 'userslogin',
                loadChildren: './user-login/userlogin.module.ts#UserloginModule'
            }, {
                path: 'cameraconfig',
                loadChildren: './camera-config/camera- 
                config.module.ts#CameraConfigModule'
            }
        ]
    }, {
        path: '',
        component: AuthLayoutComponent,
        children: [
            {
                path: 'authentication',
                loadChildren: './authentication/authentication.module#AuthenticationModule'
            }, {
                path: 'error',
                loadChildren: './error/error.module#ErrorModule'
            }, {
                path: 'login',
                component: LoginComponent,
            }, {
                path: 'cameraLogin',
                component: CamLoginComponent
            }
        ]
    }, {
        path: '**',
        redirectTo: 'error/404'
    }
];

【问题讨论】：

你在使用@angular/cli吗？
默认路由到底是什么意思？您的意思是将用户路由到登录页面或错误/404 页面？
@NadhirFalta 登录页面
@pixelbits 是的，版本 1.3.1
我认为您的路线也有问题。当路径为空时，您是否有任何理由希望始终将用户导航到登录页面？您在同一级别上也有许多空路线。

标签： angular typescript angular4-router

【解决方案1】：

在您的 Routes 中找到的第一个空路由重定向到 /login。

当您使用children 时，这意味着您的父组件有它自己的router-outlet。

我假设你 LoginComponent 在你的路由的基础上，所以 path 也应该在根目录下。像这样的：

export const AppRoutes: Routes = [
  {
    path: '',
    redirectTo: '/login',
    pathMatch: 'full'
  },
  {
    path: 'main',
    component: AdminLayoutComponent,
    children: [
      {
        path: '',
        component: MainComponent,
        data: {
          breadcrumb: 'Main',
          status: true
        }
      },
      {
        path: 'userterminal',
        loadChildren: './userterminal/userterminal.module.ts#UserTerminalModule'
      }
    ]
  },
  {
    path: 'login',
    component: LoginComponent
  }
];

使用这样的结构，当您使用重定向时，它会找到路径，因为它位于根目录。

使用，您可以从登录成功导航到main。请记住，如果您使用的是子组件，则父组件示例 AdminLayoutComponent 必须有一个 router-outlet 才能在其中加载它的子组件。

【讨论】：