Angular4--【路由】

是什么

路由很好的解決了通過建立URL和页面的对应关系，使得不同的页面可以用不同的URL来表示；可以实现多视图的单页Web应用（SPA）；
比如说一个页面有很多的模块组成，但是在动一个微小的模块的时候，整页都被牵动，这是数据加载也会很慢，效率也不高，而路由恰恰解决了这个跳转问题；

组成

1.对象

2.对象具体应用

1. Routes开始的时候是产生在模块里面的，他携带了Path和component，可以指明哪个URL对应哪个组件；
   例如：图中，component:A,指向组件A；然后component:B指向组件B；

2. 组件A在摸板中展示，但是具体在什么位置呢，这里就用到了RouteOutlet,把它放在哪，组件A就展示在哪里；

3. 如果组件B想要在HTML页面直接通过链接改变浏览器的地址，此时就可以用到了RouterLink;当然也可以在组件的控制器中调用Router的navtive()方法，来改变浏览器的地址，从而实现路由的转换；
4. 在路由时，通过URL传递数据，这些数据就保存在ActiveedRoute.
   

应用

1. 传递数据：

1.1**在查询参数中传递数据；**

路由路径？参数名=参数值  ==>  ActivedRoute.queryParams[参数名]

   “/product?id=1& name=2   => ActivedRoute.queryParams[id]”;

1.2路由的路径中传递数据；

 {path:/product/:id} =>/product/1 =>ActivedRoute.params[id]

备注：在指定路由的路径中加上参数，然后在实际的路径中携带这个参数，然后在目标组件中运用ActivedRoute.params获取；

1.3在路由配置中传递数据

{path:/product,component:ProductComponet,data:[{isProd：true}]} ==>ActivatedRoute.data[0][isProd];

分类：

1.重定向路由：

1.1定义：

在原来的转发列表中发向一台路由的路径改成另外一台路径，也就相当于让我们的数据走另一条路到达服务器；

比如，你换了个手机号，但是你的朋友记着的都是你的旧手机号，你如果挨个朋友的告诉他们你的新手机号，比较麻烦，这时候“重定向路由就发挥了很大的作用”，如果别人继续给你的旧手机号打电话，这时候会自动转到新手机号，然后你就可以接到朋友

1.2优点：

当一个路由出现问题的时候，会自动重定向到另外一个路由上去，保证你数据的畅通；

1.3缺点：

存在一定的延时，造成网速变慢；

1.4代码：

www.aaa.com ==>www.aaa.com/products
www.aaa.com/x ==>www.aaa.com/y

2.子路由：

2.1定义：

一个路由组件嵌套到另一个路由组件中，从而建立了路由的多级嵌套关系；这时候子路由的path地址就相当于父路由的path地址；

2.2代码

3.辅助路由：

3.1定义：

Angular允许一个路由中有多个Outlet，然后在路由组件中同时显示多个组件。这里有一个主要的Outlet，然后有多个附属的Outlet，然后这样可以使Angular进行附属组合，然后满足不同场景的应用；

3.2代码：

4.路由守卫：

4.1定义：

只有当用户已经登录并拥有某些权限时才能进入某些路由。比如，在查找中，用户只有在当前组件中填写了满足要求的信息，才能被导航到下一个路由。而且，当用户没有进行保存操作，试图离开的时候，提醒用户；

4.2分类：

• CanActivate:处理导航到某路由的情况；
• CanDeactive:处理当前路由离开的情况；
• Resolve:在路由激活之前获取路由数据；

4.3Resolve守卫：

如果一个程序对于用户的请求不能很好地反馈，这样用户体验度就不是很好了，这时候Resolve守卫就发挥了他作用了，他可以先进行数据的查询，然后将数据传到路由，一起反馈到桌面。