【Angular】路由

一、什么是路由
个人理解，路由就是从一个页面跳转到另一个页面。

---

二、在路由时传递数据
在路由时传递数据有三种方式

• 一在查询参数中传递数据

/product?id=1&name=2  => ActivatedRoute.queryParams[id]

1.app.component.html 中写一个参数进行传参

2.页面展示，点击商品详情，地址栏出现 ？id=1，这就是刚刚我给它传的参。

3.product.component.ts 接收传入进来的参数id

4.product.component.html

5.页面展示，下面显示商品ID为1，在第二步，只是地址栏显示id

- 二在路由路径中传递数据

{path:/product/:id} => /product/1 => ActivatedRoute.Params[id]

- 三在路由配置中传递数据

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

---

三、重定向路由
在用户访问一个特定的地址时，将其重定向到另一个制定的地址。

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

---

四、子路由

{path:'home',component:HomeComponent}

{path:'home',component:HomeComponent,
    children:[
        {
            path:'',component:XxxComponent,
        },
        {
            path:'/yyy' component:YyyComponent
        }
        ]
}

---

五、辅助路由

<router-outlet></router-outlet>
<router-outlet name="aux"></router-outlet>

{path: 'xxx',component:XxxComponent,outlet:"aux"}
{path: 'yyy',component:YyyComponent,outlet:"aux"}

<a [routerLink]= "['/home' ,{outlets:{aux: 'xxx'}}]">Xxx</a>
<a [routerLink]= "['/product' ,{outlets:{aux: 'yyy'}}]">Yyy</a>

案例整体思路
在app组件的模板上再定义一个插座来显示聊天慢板
单独开发一个聊天室组件，只显示在新定义的插座上
通过路由参数控制新插座是否显示聊天面板

---

六、路由守卫

在那些场景下用户可以进入路由及离开路由：
只有当用户已经登录并拥有某些权限时才能进入某些路由。
一个由多个表单组件组成的向导，例如注册流程，用户只有在当前路由的组件中填写了满足需求的信息才可以导航到下一个路由。
当用户未执行保存操作而试图离开当前导航时提醒用户。

路由守卫有三种情况：
CanActivate:处理导航到某路由的情况
CanDeactivate:处理从当前路由离开的情况
Resolve:在路由激活之前获取路由数据

---

总结
项目中多实践吧！