angular2里设置一级二级路由（导航栏切换）

一级导航

详细步骤

1、创建angular项目

ng new angualrdemo08 --skip-install

进入项目cd angular08，并下载各种包 。使用npm i或cnpm i命令

2、创建需要的组件

ng g component home
ng g component new
ng g component header
ng g component home/asideone
ng g component home/asidetwo
ng g componenthome/asidethree等等

3、找到 app-routing.module.ts 配置路由

用命令创建的组件，会自动引入app.module.ts文件里，把这些路径复制粘贴到app-routing.module.ts文件里，如下示例，把这部分粘贴放到app-routing.module.ts文件里：

import { HomeComponent } from './home/home.component'; 
import { NewComponent } from './new/new.component';
import { NewscontentComponent } from './newscontent/newscontent.component';
import { HeaderComponent } from './header/header.component';

添加路由

const routes: Routes = [
  { path: '', redirectTo: '/header',  pathMatch: 'full' },//默认路径
  { path:'header', component: HeaderComponent },
  { path:'home',   component: HomeComponent},
  { path:'new', component: NewComponent },
  { path:'newscontent', component: NewscontentComponent },
  { path: '**', redirectTo: 'header'}
];

4、找到 app.component.html 根组件模板，配置 router-outlet 显示动态加载的路由

首页
新闻

这样，一级路由就配置完了

二级路由

1、在 app-routing.module.ts 配置路由引入组件

把创建的想放在二级目录下的组件引入进来，看上面第3步

import { OneComponent } from './home/one/one.component';
import { TwoComponent } from './home/two/two.component';
import { ThreeComponent } from './home/three/three.component';

配置路由（不同之处，重点）

children关键字不能改
给谁添加路由，就写在哪个子路由里，这里我给home写了子路由，在home页面里跳转的页面，自然以home为前置路由

{ path: '', redirectTo: '/header',  pathMatch: 'full' },
  { path:'header', component: HeaderComponent },
  { path:'home', 
  	component: HomeComponent,
	children:[
    	 { path:'asideone', component: OneComponent },
   		 { path:'asidetwo', component: TwoComponent },
  		 { path:'asidethree', component: ThreeComponent }
  	] 
  },

2、配置 router-outlet 显示动态加载的路由

在home的页面里

        

            

                1
            
            

                2
            
            

                3