【背景】

最近恶补前端基础知识,记录一下~

【内容】

【Angular】Angularcong从入门到实战****第三章3.1 路由内容介绍
学习内容:
1、了解路由的基础知识
2、子路由、保护路由和辅助路由
3、在在线拍卖(Auction)项目中添加路由

作用:为每一个页面提供一个URL

控制整个应用视图状态的对象








3.2路由的基础知识:



(一)路由相关的对象
Routes
RouterOutlet
Router
RouterLink
ActivateRoute





组件被封装在模块里,Routes在模块里
Routes由一组配置信息组成,每个配置信息至少包含两个信息:path(制定浏览器的url)和component(用于制定相应的组件) 

在模板中通RouterQutlet来决定组件的位置,写在哪里,就显示在哪里;RouterLink用来在模板上生成一个链接改变浏览器的地址;组件的控制器总调用Router对象中的方法改变浏览器的地址实现路由转换;在路由时通过url传递数据;数据保存在Router 的ActiveedRoute中;


(1)Routes



path里不能使用“/”开头的路径

(2)RouterOutlet(插座)



(3)Router
事件绑定:




(4)RouterLink




(5)ActivateRoute

3.3 在路由时传递数据





参数快照

1、



参数快照
2、




参数订阅
3、






3.4 重定向路由
1、定义:在用户访问一个特定的地址时,将其重定向到另一个制定的地址。








3.5 子路由
1、








3.6 辅助路由















3.7 路由守卫




在app目录下建立guard文件夹,在guard文件夹下建立login.guard.ts文件





在guard文件夹下建立unsaved.guard.ts文件



3.8 resolve守卫
在进入组件之前吧组件需要的数据都加载好,如果达不到你想要的数据或者数据出问题了就直接调到错误信息页或者弹出些提示,就不再进入你的目标路由了








3.9 改造在线竞拍应用





相关文章:

  • 2021-11-28
  • 2022-01-28
  • 2021-08-05
  • 2021-10-21
  • 2021-10-08
  • 2021-06-11
  • 2021-06-21
  • 2021-07-25
猜你喜欢
  • 2021-04-09
  • 2021-09-28
  • 2021-08-02
  • 2021-07-10
  • 2021-10-11
  • 2021-11-15
  • 2021-11-23
相关资源
相似解决方案