Angular创建路由

方法一：创建项目时由angular cli来配置路由

1.创建带有路由配置项目：

// 会在app文件夹下生成一个app-routing.module.ts文件
	ng new project-name --routing （简单快速）


app.component.htm文件里会有个路由出口（路由显示的地方）

     <header>
	     <ul>
	        <li><a [routerLink]="[ '/home']">home</a></li>
	        <li><a [routerLink]="[ '/news']">news</a></li>
	        <li><a routerLink="/user">user</a></li>
	      </ul>
    </header>
    
    <router-outlet></router-outlet>




在app-routing.module.ts配置路由：
// 需导入组件
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {HomeComponent} from './components/home/home.component';
import {NewsComponent} from './components/news/news.component';
import {UserComponent} from './components/user/user.component';

const routes: Routes = [
	 // 刚进来如果为空的话就跳转到home路由
    {
	      path:'',
	      redirectTo:'home',
	      pathMatch:'full'
    },
    {
          path:'home',
          component: HomeComponent,
      
    },
    {
          path:'news',
          component: NewsComponent,
      
    },
    {
	      path:'user',
	      component: UserComponent,
	      children:[]
    },
   
    //如果用户输入的url地址不正确，或者输入的地址不存在跳转到指定的路径,使用”**”去匹配，路由会先从上面匹配，如果匹配不成功就会跳转到404页面
    {
          path:'**',
          //redirectTo:'Page404Component',
          component: Page404Component,
      
    },

];

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