angular父子路由_嵌套路由

本文主要给大家介绍angular父子路由、嵌套路由的使用。

在配置文件中配置路由

在app-routing.module.ts 文件中配置路由

// 配置路由

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

// 引入组件

import {HomeComponent} from '../app/components/home/home.component'
import {homewelcomeComponent} from '../app/components/product/product.component'
import {settingComponent } from './components/content/content.component';

const routes: Routes = [
  {
    path:'home',
    component:HomeComponent,
    children:[
      {
        path:'homewelcome',
        component:homewelcome,
      },
      {
        path:'setting',
        component:setting,
      },
    ]
  },
  // 匹配不到路由跳转到home
  {
    path:'**',
    redirectTo:'home'
  }
];

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

在组件中使用嵌套路由

需要将访问路由的组件下面增加 router-outlet 组件用来展示子路由组件

<div class="main">
  <div class="left">
    <a [routerLink]="['/home/welcome']">跳转welcome</a>
    <a [routerLink]="['/home/setting']">跳转setting</a>
  </div>
  <div class="right">
    <router-outlet></router-outlet>
  </div>
</div>

如果你会使用vue，那么你对此内容也会很快的理解。