angular 路由

 

Routes如下【AppRoutingModule】：
const routes: Routes = [
  {
    path:'',
    component: HomeComponent
  },
  {
    path: 'product',
    component: ProductComponent
  }
];

插座【app.component.html】：
<router-outlet></router-outlet>

 

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

Router：
<button type="button" value="商品详情" (click)="toProductDetails()">商品详情</button>
export class AppComponent {
  title = 'app';
  constructor(private router: Router) {

  }
  toProductDetails() {
    this.router.navigate(['/product']);
  }
}

页面不存在

const routes: Routes = [
  {
    path:'',
    component: HomeComponent
  },
  {
    path: 'product',
    component: ProductComponent
  }
  ,
  {
    path: '**',
    component: Code404Component  //放最后，不然先匹配这个
  }
];

<p>
页面不存在
</p>