前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >AngularJs之路由配置(一)

AngularJs之路由配置(一)

作者头像
黄林晴
发布2019-01-10 15:56:26
8830
发布2019-01-10 15:56:26
举报
文章被收录于专栏:代码男人

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标签内容不变,我们需要点击主页或者商品详情替换路由的内容,我们需要指定路由内容的位置

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

代码语言:javascript
复制
router-outlet标签来指定路由内容的占位符,及/home时,Home组件就在这里来显示
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017年11月11日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档