AngularJs之路由配置（一）

1.我们可新建一个路由项目  

ng new 项目名称 --routing

我们可以看到路由项目有app-routing.modules.ts

路由配置中主要有五个参数：

我们新建好home组件后在app-routing.modules.ts中配置路路径

如上图所示意思就是启动项目后比如localhost:8008/ 根据

知道跳转到home路径由

配置可以看出home路径下展示的是homeComponent所示当我们访问localhost:8008/ 时看到的页面就是home组件上的内容

2.路由传参数

上述路由肯定不能满足我们的需求，比如我们进入到商品页面，可能需要查看商品详情这个时候我们需要给商品详情页面传商品id的参数，

我们可以使用这种方式然后在页面中使用[routeLink]进行跳转

3. 子路由

很多时候我们也需要使用子路由比如/product/路径下有商品详情页面

我们需要在父路由的内部来定义域children路由标签即可。

4.路由是单页面应用的基础，比如header标签内容不变，我们需要点击主页或者商品详情替换路由的内容，我们需要指定路由内容的位置

比如现在点击商品详情实现路由的跳转，我们需要在页面中使用

router-outlet标签来指定路由内容的占位符，及/home时，Home组件就在这里来显示