时间戳

首页 > 解决方案 > 默认路由不起作用 [Angular4]

angular - 默认路由不起作用 [Angular4]

问题描述

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

此代码在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'
    }
];

标签： angulartypescriptangular4-router

解决方案

在您的 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必须具有 arouter-outlet才能在其中加载它的子组件。

推荐阅读