zoukankan      html  css  js  c++  java
  • angular 路由

    在路由时传递数据

    1. 在查询参数中传递数据

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

    2.在路由路径中传递数据

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

    3. 在路由配置中传递数据

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

     重定向路由

    const routes:Routes = [
        {path: '', redirectTo: '/home', pathMatch: 'full'}   
    ]

    子路由<router-outlet></router-outlet>

    {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>

    路由守卫

    CanActivate:处理导航到某路由的情况
    CanDeactivate:处理从当前路由离开的情况
    Resolve:在路由激活之前获取路由数据
  • 相关阅读:
    连通分量板子
    2017年7月17日
    强连通缩点— HDU1827
    马拉车代码
    表达式求值
    Gym-100883F、Gym-101095B状态压缩小结
    矩阵快速幂小结-Hdu2604
    3月27日
    简单移动端自适应轮播图
    上了热搜榜前端工程师面试内幕
  • 原文地址:https://www.cnblogs.com/leiting/p/8384947.html
Copyright © 2011-2022 走看看