angular4路由

路由 angular ionic 路由/子路由,懒加载

  1. const routes: Routes = [
  2. {
  3. path: 'tabs',
  4. component: TabsPage,
  5. children: [
  6. {
  7. path: 'tab1',
  8. children: [
  9. {
  10. path: '',
  11. loadChildren: '../tab1/tab1.module#Tab1PageModule'
  12. }
  13. ]
  14. },
  15. {
  16. path: 'tab2',
  17. children: [
  18. {
  19. path: '',
  20. loadChildren: '../tab2/tab2.module#Tab2PageModule'
  21. }
  22. ]
  23. },
  24. {
  25. path: 'tab3',
  26. children: [
  27. {
  28. path: '',
  29. loadChildren: '../tab3/tab3.module#Tab3PageModule'
  30. }
  31. ]
  32. },
  33. {
  34. path: '',
  35. redirectTo: '/tabs/tab1',
  36. pathMatch: 'full'
  37. }
  38. ]
  39. },
  40. {
  41. path: '',
  42. redirectTo: '/tabs/tab1',
  43. pathMatch: 'full'
  44. }
  45. ];
参数:
  1. pathMath:pathMatch是一个用来指定路由匹配策略的字符串。可选项有 prefix(默认值)和 full
    prefix:以指定的路径开头;
    full:与指定路径完全一样。

例1:

  1. {
  2. path: 'abc',
  3. redirectTo: '/tabs/tab1',
  4. pathMatch: 'prefix'
  5. }
  • yes:

    /abc

    /abc/

    /abc/d

  • no:

    /abcd

    /abcd/

例2:

  1. {
  2. path: 'abc',
  3. redirectTo: '/tabs/tab1',
  4. pathMatch: 'full'
  5. }
  • y:

    /abc

    /abc/

  • n:

    /abcd

    /abcd/

  1. 如何做一个最简单的页面调转

    1.直接地址栏访问



    2. Router




    参考:
    https://angular.cn/api/router/Route
    https://angular.cn/api/router/Routes


转载声明:本文为博林网-IT技术分享的原创文章,转载请注明原文地址,谢谢合作

发表评论: