1 路由的设置

1.1 设置路由

//app-routing.module.ts
1.导入参与路由的组件
import { HomesComponent } from './components/router/homes/homes.component'
import { NewComponent } from './components/router/new/new.component'
import { ProductComponent } from './components/router/product/product.component'
import { LoginComponent } from './components/router/login/login.component'
2.配置路由
const routes: Routes = [
  {
    path:'login',
    component:LoginComponent
  },
  {
    path: 'home',
    component:HomesComponent,
  },
  {
    path:'new',
    component:NewComponent
  },
  {
    path:'product',
    component:ProductComponent
  }
  ]

1.2 路由的跳转

<a routerLink="/new">新闻组件</a> -->
//静态路由的跳转



<a [routerLink]="[ '/home' ]" routerLinkActive="active">首页</a>
//动态路由的跳转   routerLinkActive可以设置路由的样式  active为类名
<a [routerLink]="[ '/new' ]" routerLinkActive="active">新闻</a>