angular6.0使用教程：angular6.0的路由使用

扫描下面的二维码，“关注”我的百家号。

前面的angular6.0教程文章中，我们实现的数据调用和展示都是在同一个页面的。而我们开发的angular6.0的项目不可能只有一个页面，如：网站首页、文章列表页、文章详情页，我们想要的效果是，home页面显示home内容，而list页面显示list列表内容。angular6.0要想实现多页面展示，需要通过路由来实现。那么，怎么来使用angular6.0路由呢？

angular4.0/5.0/6.0视频教程

第一步：给项目添加angular6.0路由模块：

添加angular路由分为2种情况：

情况1：新建项目时就添加路由：

ng  new  demo  --routing   【新建demo项目的同时，就创建好angular路由】

情况2：在老项目中添加路由【即项目已创建好了，只是没有添加路由】：

ng  g  module  app-routing  --flat  --module=app

能过上面的命令，在项目app目录下会创建一个app-routing.module.ts文件，并且同时在app.module.ts文件中自动添加对app-routing路由的引入和声明，而不需要手动引入。

第二步：在app-routing文件中引入RouterModule模块【如果是情况1添加的路由，可以省略这一步】：

import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})

第三步：为项目设置路由：

根据前面章节我们创建的组件，有home组件和list组件，在没有设置angular6.0路由时，我们在浏览器地址栏中输入地址：http://localhost:4200/home和http://localhost:4200/list时，页面展示的内容不会发生变化。我们来为home和list来设置路由：

const routes: Routes = [
  //地址栏是home时调用homecomponent组件
  { path:'home', component:HomeComponent },
  //地址栏是list时调用listcomponent组件
  { path:'list', component:ListComponent },
  //地址栏是任意字符时，调用 homecomponent组件，即默认路由
  { path:'**', redirectTo:'/home' } //这里是2个*号，这个必须放在最后面
];

通过上面几步，我们就为项目添加了angular6.0路由功能，并为项目的home组件和list组件分别设置了路由以及默认路由。