web前端工程化之路由

版权声明：本文为博主原创文章，转载请注明出处。 https://blog.csdn.net/mayfla/article/details/78942558

控制视图应用状态的对象

调试阶段，更新组件和路由的时候，需要重新运行，浏览器更新是没有效果的，只有静态页面的更新能够被刷新出来。

路由的5个对象

Routes，path中不加/

RouterLink

Router对象

在app.component.ts中，通过构造函数创建，然后在事件中调用导航

 效果：

    

——————————————————————————————

RouterOutlet

插座，在插座下面显示组件的内容，根据路由配置，将子组件的内容，放在插座所在位置。

 

 

——————————————————————————————

ActivateRoute

三种传递参数的方法

在查询参数中传递数据

传入参数：

接收参数：

@Input (Input Decorator):代表是一个输入属性

 

在查询路径中传递数据

传入参数：

 

 

相同的商品详情组件路由到商品详情的时候，ProductComponent不会再次调用构造函数创建ActivitedRoute，那么OnInit方法也不会被再次创建。

解决方法:

在Init方法中进行订阅。

 

在路由配置中传递数据

 

重定向路由

当访问一个路径的时候，可以重新指向一个新的地址

比如访问https://www.baidu.com/home最终访问的仍然是https://www.baidu.com/

 

/home指向空的路径

效果

使用空的路径，就能够重定向到home页面中

 

 

子路由

子路由是一个数组

 

传参数

组件中获得参数

显示效果：

 

 

 

辅助路由

在插座中给一个名字

在路由中写上插座的名称，这样可以规定在那个插座上显示哪个组件

上面这两个都在aux插座上显示

 

在总模板html上增加一个带名字的插座

路由中

文本框

css设置样式

 

 

 

 

路由守卫

使用路由守卫---钩子

只有当用户已经登录并拥有某些权限才能进入某些路由

CanActivate：(可运行)

 

 

一个由多个表单组件的向导，例如注册流程，用户只有在当前路由的组件中填写了满足要求的信息才可以导航到下一个路由

CanDeactivate：（可禁用）

 

 

 

当用户未执行保存操作而试图离开当前导航时提醒用户

Resolve：例如:页面修改，在组件中发出http请求，中间有时间差，模板会延迟加载，使用resolve，在进入路由前就读完数据，然后带着数据进入，这样数据不会有延迟加载

 

最后画了一个路由配置的流程图，个人理解，可能有误，希望多多指教