Angular6 路由概述

路由的说明

· 路由是实现spa的基础设施

· 作用：让用户从一个视图导航到另一个视图

· 路由是：url和组件的对应规则

· 使用：html5风格（history.pushState）的导航

· 支持：重定向、路由高亮、通配符路由、路由参数

· 支持：子路由、路由模块、路由守卫、异步路由等

路由的配置：

·再index.html中 <base href=“/”>

·倒入RouterModule模块

·配置路由规则

·将RouterModule.forRoot(appRoutes)模块配置在根模块中

·使用<router-outlet></router-outlet>指定路由出口

最简单的路由配置

 

 

forRoot的说明

· 问题说明：服务应该是单例的，某些场景下会造成服务多次主持，破坏服务的单例特性

· 比如：路由懒加载的情况

· 解决方式：使用模块的forRoot()方法导入模块

· RouterModule的forRoot()保证项目中只有一个Router服务

默认路由

 

 

路由跳转

通配符路由

·如果匹配不到已经配置的路由则会跳转到通配路由

path:”**”

Component:’404组件’

一定要放在最下边

编程式导航

· 404页面倒计时返回首页

路由参数

子路由

children

路由激活高亮

routerLinkActive指令