Question

在我的Angular-6项目中，我希望将嵌套路由作为默认路由。这意味着，如果用户在浏览器中点击“ localhost：4200 ”，他将被重定向到“ localhost：4200 / dashboard / headlines ”。我在下面写了路由配置，但是没有用。 1.我做错了什么？ 2.延迟加载模块是否可以实现相同的功能？

const routes: Routes = [
  {
    path: '',
    redirectTo: '/dashboard',
    pathMatch: 'full'
  },
  {
    path: 'dashboard',
    component: NewsComponent,
    children: [
      { path: '', redirectTo: '/headlines', pathMatch: 'full' },
      { path: 'headlines', component: HeadLinesComponent },
      { path: 'detail', component: DeatilNewsComponent }
    ]
  }
]

news.component.html

<div>News Work</div>
<router-outlet></router-outlet>

app.component.html

<router-outlet></router-outlet>

Answer 1

将您的路线转换为此：

return: "is 1, 2 or 3"

工作示例here

Answer 2

这是您的Working Stackblitz Demo

将您的app.routing.ts修改为以下代码：〜

import { Routes } from '@angular/router';
import { NewsComponent } from './news.component';
import { HeadLinesComponent } from './head-lines.component';

export const routes: Routes = [
  {
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full'
  }, {
    path: 'dashboard',
    component: NewsComponent,
    pathMatch: 'prefix',
    children: [
      { path: '', redirectTo: 'headlines', pathMatch: 'full' },
      { path: 'headlines', component: HeadLinesComponent }
    ]
  }
];

Exact duplicate here

Check here for more on Lazy loading the default child route

Check out the official Angular Documentation

希望这会有所帮助。

将嵌套路线设为默认路线-[角度]

2 个答案: