angular 4.0 路由看这一篇就足够了

路由：给我的感觉就跟Ajax差不多，就是我不刷新页面，更改页面的部分内容。

先说一下路由的几个概念：

路由实现

1.定义路由配置

我们要更改app.routing.module.ts文件里的内容。

例如：我要默认页面加载home页面，那么我就要先设置下面内容

注意：path路径不能用“/”斜线开头

2.routerLink声明跳转的路径

在app.component.html中

3.添加<router-outlet> </router-outlet>标签

插座，就是你想让你设置的路由，地址变更的时候，更改的页面哪个位置。

路由的跳转两种形式

指令跳转

<a routerLink="login"></a>
<a [routerLink="['login']"]>

代码跳转

this.router.navigate(['path'])

路由的种类

默认路由

path:'',
redirectTo:'',  //默认跳转的组件
pathMatch:'full' //渲染方式

同步路由

path:'login',   //组件的地址名称
component:LoginComponent //组件

异步路由

path:'',//组件的地址名称
loadChildren:''  //加载的组件地址

重定向

遇到没有的地址，跳转的页面。

path:'**',
component:loginComponent

传递参数

传参数

接参数

在url中传递参数

第一步 更改路由path属性，让它可以携带参数

第二步 修改routerLink

第三步 更改框红 位置就行了

子路由

在主路由的基础上，我想继续更改页面的内容，我们就可以用到子路由。调用的时候，跟主路由类似，不在多说。

子路由如果是path:'' 空的，那么调用的时候要[routerLink="['./']"

辅助路由

我们在一个页面创建多个路由。

定义一个叫’aux‘的插座

路由守卫

三种路由守卫

CanActivate:不能满足条件就不能导航到指定的路由

CanDeactivate:不能满足条件就不能从当前路由离开

Resolve:在路由激活之前获取路由数据