angular6之路由

对于前端单页应用，路由一般由前端管理。在angular6中路由通过@angular/router模块实现。

1、在app的根目录下新建app-routing.module.ts，需要引入RouteModule, Routes模块，

import { RouterModule, Routes } from ‘@angular/router’

2、配置路由信息:

动态路由：

{

　　path: '/view/:id',

　　component: viewComponent

}

可以在页面获取的路由参数id的具体值。

3、配置ngModule
@NgModule ({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})

4、最后将模块导出
export class AppRoutingModule {}
在app.module.ts根模块中将AppRoutingModule在imports中引入
在模板中<router-outlet></router-outlet>会显示匹配到的组件

</html>

路由跳转：
方法一：
routerLink属性绑定
如：<a [routerLink]=“[‘/list/all’]”>
<a [routerLink]=“[‘/list’, {foo:’foo’}]”> /list;foo=foo
<a [routerLink]=“[‘/list]” [queryParams]="{debug: true}"> /list?foo=foo
方法二：
import {Router} from '@angular/router';
private router: Router
this.router.navigateByUrl('/list')

 

转载于:https://www.cnblogs.com/leejay6567/p/9538540.html