Question

import {NgModule} from "@angular/core";
import { RouterModule, Route } from"@angular/router";
import {CarsListComponent} from "./cars/cars-list/cars-list.component";
import {AuthGuard} from "./auth/auth.guard";
import {PageNotFoundComponent} from "./shared-module/page-not-found/page- 
not-found.component";
import {LoginModule} from "./login/login.module"

const APP_ROUTES : Route[] = [

    { path: '', pathMatch: 'full', redirectTo: 'cars', canActivate: 
[AuthGuard] },

    { path: 'cars', component: <any>CarsListComponent, canActivate: 
[AuthGuard]},

    { path: '**', component: PageNotFoundComponent }

];



@NgModule({
    imports: [
    RouterModule.forRoot(APP_ROUTES, { enableTracing: true})
    ],
    exports: []
})


export class AppRoutingModule{}

您好

我遇到通配符问题。我创建了新的组件PageNotFoundComponent，当我在app.module.ts上添加它时，这个通配符首先加载我不知道为什么？

感谢您的帮助

Answer 1

当路由器扫描路由时没有找到任何匹配项时，你只有一条被保护的路由，所以它路由到pagenotfound
您需要定义默认路由如果用户未经过身份验证，则应将其重新路由到其他位置，您可以定义不应保护的路由/login

import { RouterModule, Routes } from '@angular/router';

const APP_ROUTES : Routes = [

    { path: '', pathMatch: 'full', redirectTo: 'login'},
    { path: 'login', component:logincomponent },

    { path: 'cars', component: CarsListComponent, canActivate: 
[AuthGuard]},

    { path: '**', component: PageNotFoundComponent }

];

Answer 2

试试这个

const APP_ROUTES : Route[] = [
    { path: '', pathMatch: 'full', redirectTo: 'cars'
    },    
    { path: 'cars', component: CarsListComponent
    },
    { path: '404', component: PageNotFoundComponent }
    { path: '**', redirectTo: '404' }

];

WildCard它无法正常工作

2 个答案: