【Angular4学习】--路由的五个对象

前言

今天小编根据实例来分享一下路由的五个对象的作用，

五个对象

Routes

Routes(路由配置)，一般在app.routing.module.ts文件里配置，Routes里面是一组路由对象，每个对象有两个属性:path(路由对象的路径)+component(路由对象的组件)，即，当我导航到某一个路径(path)上时，angular会显示哪个组件(component)

const routes: Routes = [ 
{path: '',component:HomeComponent }, //当路径为空时，显示home组件

{path: 'product',component:ProductComponent},//当路径为product时显示product组件
{path: 'product/:id', component:ProductComponent}
{path:'**',component:Code404Component},//这个是通配符路由，当匹配不到导航的路径时，就会跳转到自己设定的code404组件
];

ps: 通配符路由放在最后面，这个是最通用的，当前的路由配置里都找不到时候才会通配这个路由，如果放在最前面，一开始就会匹配上通配路由，就不会找后面的页面了，

RouterLink

routerLink用斜杠开头表示导航到根路由，./表示导航到子路由，这里我们是导航到根路由，所以点击主页之后会去app-routing.modules（路由配置）里面找到我们的所有根路由，然后找到名字匹配的根路由，展示相应的组件

  //导航到根路由homecomponent
  //在根路由login.component.html中跳转
   <a [routerLink]="['/home']">进入主页a> 
  <a [routerLink]="['/product',1]">进入商品ID为1的详情a>  

解释：routerlink指令是一个数组，我们可以改数组的元素，这里要和app-routing.module.ts里面路由配置path属性对应上，第一个是固定的product，第二个是我们的id参数。

RouterOutlet

插座：当我用路由根据path导航到某个组件时候，这个组件会显示到这个插座的后面

<p>欢迎!<p>

<a [routerLink]="['/']">主页a>
<a [routerLink]="['/product',1]">商品详情a>

<router-outlet>router-outlet>

Router

router在运行时执行路由的对象
在html页面定义了一个button，然后点击button根据方法跳转到指定页面

<input type="button" value="商品详情" (click)="toProductDetails()">

在component.ts页面里先构造一个router对象，然后实现跳转方法。

export class AppComponent {
//构造了一个router对象
constructor(private router:Router) {}

toProductDetails(){
 //用router对象的navigate()导航到新的页面
  this.router.navigate(['/product',1]);  
   }
}

总结

还有一个ActivedRoute对象主要在路由传递参数中用到，下次会做详细的总结。