路由:根据不同的URL地址,动态的让根组件加载其他组件来实现单一页面的应用。

1.创建一个带有路由的项目;

2.在 app-routing.module.ts 里面添加需要配置的路由;

1️⃣导入需要使用路由动态加载的组件;

2️⃣在 const routes:Routes =[] 配置路由;

const routes: Routes = [
{path:路径,component:组件名称},
...
];

3️⃣配置默认路由或组件

{path:'**',redirectTo:组件路径}

例如:

 

3.在app.component.html,配置router-outlet显示动态加载的路由.

在html中输入 ng-router-linkActive 选择它就会弹出默认的写法:
//routerLinkActive 是固定写法;active 是类名,可以写任意名称
 <a [routerLink]="[ '/path' ]" routerLinkActive="active">name</a>

 

posted on 2019-09-04 10:20  夜之独行者  阅读(100)  评论(0编辑  收藏  举报