angular路由

1. 路由是什么

       路由(导航)本质上是切换视图的一种机制
   

2.路由的导航的URL是否真实存在

    angular的路由借鉴大家熟知的浏览器URL变化导致页面切换的机制

    angular是单页程序，路由显示的路径不过是一种保存路由状态的机制，这个路径在Web服务器上不存在

3.定义路由数组

    路径 pathMatch  full 指绝对路由

    组件

    子路由

5.导入RouterModule

    forRoot 根模块

    forChild 子模块

6.Roters

   路由配置，保存着哪个URL对应展示组件，以及在哪个RouterOutlet 中显示的组件

7.RouterOutlet

    在html中标记路由内容呈现的占位指令

8.Router

    负责在运行时执行路由的对象，可以通过调用其navigate()和navigateByUrl()方法来导航到一个指定的路由

9.RouterLink

    在html中声明路由导航用的指令

10. ActivatedRouter

    当前激活的路由对象，保存着当前路由的信息如路由地址，路由参数等

11.路由传参

1.查询参数

            配置

                {path: 'home',component:HomeContainerComponent}

            激活

                <a {routerLink  ="['/home']" [queryParams] = {name:'value1'}></a>

                this.Router.Navigate(['home'], {queryParams: {name:'value1'}});

            Url

                http://localhost:4200/home?name =value1

            读取

                    this.router.queryParamsMap.subscribe(params=>{...});

2. 路径对象参数

            配置

                {path: 'home',component:HomeContainerComponent}

            激活

                <a {routerLink  ="['/home'， tab.link, {name:'value1'}]"></a>

                this.Router.Navigate(['home', tab.link, {name:'value1'}]);

            Url

                http://localhost:4200/home;name =value1

            读取

                this.router.qaramsMap.subscribe(params=>{...});

3.路径参数

              配置

                 {path: '：tablink',component:HomeContainerComponent}

              激活

                  <a {routerLink  ="['/home', tab.link]"></a>

                  this.Router.Navigate(['home', tab.link]);

              Url

                    http://localhost:4200/home/sports

              读取

                  this.router.qaramsMap.subscribe(params=>{...});