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

ng new 项目名称 --routing

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

AngularJs之路由配置(一)

AngularJs之路由配置(一)AngularJs之路由配置(一)路由配置中主要有五个参数:

AngularJs之路由配置(一)

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

AngularJs之路由配置(一)AngularJs之路由配置(一)

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

AngularJs之路由配置(一)AngularJs之路由配置(一)AngularJs之路由配置(一)

知道跳转到home路径由

AngularJs之路由配置(一)AngularJs之路由配置(一)

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

2.路由传参数

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

AngularJs之路由配置(一)AngularJs之路由配置(一)

我们可以使用这种方式然后在页面中使用[routeLink]进行跳转AngularJs之路由配置(一)

AngularJs之路由配置(一)
AngularJs之路由配置(一)

AngularJs之路由配置(一)
3. 子路由

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

AngularJs之路由配置(一)我们需要在父路由的内部来定义域children路由标签即可。

AngularJs之路由配置(一)

AngularJs之路由配置(一)

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

AngularJs之路由配置(一)

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

AngularJs之路由配置(一)

AngularJs之路由配置(一)AngularJs之路由配置(一)

AngularJs之路由配置(一)

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

相关文章:

  • 2021-07-06
  • 2021-12-05
  • 2021-12-13
  • 2022-02-28
  • 2022-12-23
  • 2021-08-26
猜你喜欢
  • 2021-07-23
  • 2022-01-03
  • 2021-09-03
  • 2022-12-23
  • 2022-02-19
相关资源
相似解决方案