Angular中的路由配置、路由重定向、默认选中路由

港控/mmm° 2023-10-06 09:04 72阅读 0赞

## 场景 ##

Angular介绍、安装Angular Cli、创建Angular项目入门教程：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/105570017 ][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_105570017]

Angular新建组件以及组件之间的调用：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/105694997][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_105694997]

通过以上搭建起Angular项目。

注：

博客：  
[https://blog.csdn.net/badao\_liumang\_qizhi ][https_blog.csdn.net_badao_liumang_qizhi]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

参照上面博客在新建Angular项目时选择添加路由

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

然后参照上面新建组件的方式新建三个组件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1][]

找到app-routing.module.ts配置路由

默认的代码结构为

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2][]

首先需要引入组件

import { ParentComponent } from './components/parent/parent.component';
    import { ChildComponent } from './components/child/child.component';
    import { NewsComponent } from './components/news/news.component';

这里引入的组件就是你需要配置的组件

然后配置路由

const routes: Routes = [
      {path:'parent',component:ParentComponent},
      {path:'child',component:ChildComponent},
      {path:'news',component:NewsComponent}
    
    ];

找到app.component.html跟组件模板，配置router-outlet显示动态加载的路由

使用routerLink进行路由的跳转，为了显示上更有效果，这里给header在app.component.scss中添加了样式

.header{
    
        height: 44px;
        line-height: 44px;
    
        background: #000;
    
        color: #fff;
    
        a{
    
            color: #fff;
    
            padding: 10px 40px;
        }
    
    }

然后运行项目看效果

![20200517225348626.gif][]

### 匹配不到路由时路由重定向 ###

如果匹配不到路由或者路由所加载的组件时可以设置任意路由跳转路径，这里使其重定向到新闻组件

{
        path:'**',
       redirectTo:'news'
      }

#### 效果 ####

![2020051722535879.gif][]

### 设置默认选中路由 ###

怎样设置路由选中时样式改变的效果

在html中添加routerLinkActive

然后在scss中添加active样式为字体为红色

.active{
    
            color: red;
        }

#### 效果 ####

![20200517225414482.gif][]

[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_105570017]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105570017
[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_105694997]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105694997
[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200517225248819.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200517225257751.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200517225300820.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[20200517225348626.gif]: https://img-blog.csdnimg.cn/20200517225348626.gif
[2020051722535879.gif]: https://img-blog.csdnimg.cn/2020051722535879.gif
[20200517225414482.gif]: https://img-blog.csdnimg.cn/20200517225414482.gif