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组件就在这里来显示

猜你喜欢

转载自blog.csdn.net/huangliniqng/article/details/78504578