Routeslink

使用说明link

简单配置link

Simple Configurationlink

      
        content_copy
      
      [{
  path: 'team/:id',
 component: Team,
  children: [{
    path: 'user/:name',
    component: User
  }]
}]
    

当导航到 /team/11/user/bob 时，路由器将会创建一个 Team 组件，其中包含一个 User 组件。

When navigating to /team/11/user/bob, the router will create the team component with the user component in it.

多重路由出口link

Multiple Outletslink

      
        content_copy
      
      [{
  path: 'team/:id',
  component: Team
}, {
  path: 'chat/:user',
  component: Chat
  outlet: 'aux'
}]
    

在导航到 /team/11(aux:chat/jim) 时，路由器将会在创建了 Chat 组件之后创建一个 Team 组件。Chat 组件会被放进 aux 路由出口中。

When navigating to /team/11(aux:chat/jim), the router will create the team component next to the chat component. The chat component will be placed into the aux outlet.

通配符link

Wild Cardslink

      
        content_copy
      
      [{
  path: '**',
  component: Sink
}]
    

无论你导航到哪里，路由器都会实例化这个 Sink 组件。

Regardless of where you navigate to, the router will instantiate the sink component.

重定向link

Redirectslink

      
        content_copy
      
      [{
  path: 'team/:id',
  component: Team,
  children: [{
    path: 'legacy/user/:name',
    redirectTo: 'user/:name'
  }, {
    path: 'user/:name',
    component: User
  }]
}]
    

当导航到 '/team/11/legacy/user/jim' 时，路由器将会把 URL 改成 '/team/11/user/jim'，然后实例化一个 Team 组件，其中包含一个 User 组件。

When navigating to '/team/11/legacy/user/jim', the router will change the url to '/team/11/user/jim', and then will instantiate the team component with the user component in it.

如果 redirectTo 的值是以 / 开头的，则会执行一次绝对导航。比如，如果上面的例子中我们把 redirectTo 改为 /user/:name， 那么最终的 url 就会是 '/user/jim'。

If the redirectTo value starts with a '/', then it is an absolute redirect. E.g., if in the example above we change the redirectTo to /user/:name, the result url will be '/user/jim'.

空路径link

Empty Pathlink

空路径路由可用来实例化一些不"消费"任何 url 区段的组件。来看下列配置：

Empty-path route configurations can be used to instantiate components that do not 'consume' any url segments. Let's look at the following configuration:

      
        content_copy
      
      [{
  path: 'team/:id',
  component: Team,
  children: [{
    path: '',
    component: AllUsers
  }, {
    path: 'user/:name',
    component: User
  }]
}]
    

当导航到 /team/11 时，路由器就会实例化 AllUsers 组件。

When navigating to /team/11, the router will instantiate the AllUsers component.

空路径路由还可以有子路由。

Empty-path routes can have children.

      
        content_copy
      
      
[{
  path: 'team/:id',
  component: Team,
  children: [{
    path: '',
    component: WrapperCmp,
    children: [{
      path: 'user/:name',
      component: User
    }]
  }]
}]
    

当导航到 /team/11/user/jim 时，路由器将会实例化 WrapperCmp，其中还有一个 User 组件。

When navigating to /team/11/user/jim, the router will instantiate the wrapper component with the user component in it.

空路径路由会继承它的父路由的参数和数据。这是因为它不能拥有自己的参数，所以，它通常会把其父路由的参数和数据当做自己的使用。

An empty path route inherits its parent's params and data. This is because it cannot have its own params, and, as a result, it often uses its parent's params and data as its own.

匹配策略link

Matching Strategylink

默认情况下，路由器会查看当前 URL 中还剩下什么，并检查它是否以指定的路径开头（比如 /team/11/user 就是用 team/:id 开头的）。

By default the router will look at what is left in the url, and check if it starts with the specified path (e.g., /team/11/user starts with team/:id).

我们可以修改匹配策略，以确保该路径匹配所有尚未消费的 url，它相当于 unconsumedUrl === path 或正则表达式中的 $。

We can change the matching strategy to make sure that the path covers the whole unconsumed url, which is akin to unconsumedUrl === path or $ regular expressions.

如果要把空路径路由重定向到别处，这尤其重要。

This is particularly important when redirecting empty-path routes.

      
        content_copy
      
      [{
  path: '',
  pathMatch: 'prefix', //default
  redirectTo: 'main'
}, {
  path: 'main',
  component: Main
}]
    

由于空路径是任何 url 的前缀，所以即使想导航到 '/main'，路由器仍然会执行这次跳转。

Since an empty path is a prefix of any url, even when navigating to '/main', the router will still apply the redirect.

如果指定了 pathMatch: full，则路由器只有在导航到 '/' 时才会执行这次跳转。

If pathMatch: full is provided, the router will apply the redirect if and only if navigating to '/'.

      
        content_copy
      
      [{
  path: '',
  pathMatch: 'full',
  redirectTo: 'main'
}, {
  path: 'main',
  component: Main
}]
    

无组件路由link

Componentless Routeslink

当需要在兄弟组件之间共享参数时，这非常有用。

It is useful at times to have the ability to share parameters between sibling components.

假设我们有两个组件 ChildCmp 和 AuxCmp，它们彼此相邻，并且都需要一个 id 参数。

Say we have two components--ChildCmp and AuxCmp--that we want to put next to each other and both of them require some id parameter.

解决方案之一就是伪造一个父组件，这样一来，这些兄弟组件就可以通过它获取同一个 id 参数了。但这还不理想。我们要改用无组件路由。

One way to do that would be to have a bogus parent component, so both the siblings can get the id parameter from it. This is not ideal. Instead, you can use a componentless route.

      
        content_copy
      
      [{
   path: 'parent/:id',
   children: [
     { path: 'a', component: MainChild },
     { path: 'b', component: AuxChild, outlet: 'aux' }
   ]
}]
    

这样当导航到 parent/10/(a//aux:b) 时，该路由将会先后实例化主要的子控件和辅助子控件。在这个例子中，应用组件必须定义主路由出口和 aux 出口。

So when navigating to parent/10/(a//aux:b), the route will instantiate the main child and aux child components next to each other. In this example, the application component has to have the primary and aux outlets defined.

路由器还会把这个无组件父路由的 params、data 和 resolve 结果合并到子路由的 params、data 和 resolve 中。 之所以能这样，是因为这里没有组件能接收这个无组件父路由的激活路由信息，所以只能合并到子路由中。

The router will also merge the params, data, and resolve of the componentless parent into the params, data, and resolve of the children. This is done because there is no component that can inject the activated route of the componentless parent.

当用如下方式定义子组件时，这会非常有用：

This is especially useful when child components are defined as follows:

      
        content_copy
      
      [{
   path: 'parent/:id',
   children: [
     { path: '', component: MainChild },
     { path: '', component: AuxChild, outlet: 'aux' }
   ]
}]
    

使用这种配置，导航到 '/parent/10' 时就会创建主要的子组件和辅助子组件。

With this configuration in place, navigating to '/parent/10' will create the main child and aux components.

惰性加载link

Lazy Loadinglink

惰性加载可以通过把应用拆分成多个发布包，并按需加载它们，来加速应用的启动时间。 路由器的设计让惰性加载非常简易。只要用 loadChildren 属性代替 children 属性就可以了，例如：

Lazy loading speeds up our application load time by splitting it into multiple bundles, and loading them on demand. The router is designed to make lazy loading simple and easy. Instead of providing the children property, you can provide the loadChildren property, as follows:

      
        content_copy
      
      [{
  path: 'team/:id',
  component: Team,
  loadChildren: 'team'
}]
    

路由器会使用已注册的 NgModuleFactoryLoader 来获取与 team 相关的 NgModule。 然后，它就会提取出那个 NgModule 中定义的一组路由，并透明的把那些路由添加到主路由配置中。

The router will use registered NgModuleFactoryLoader to fetch an NgModule associated with 'team'. Then it will extract the set of routes defined in that NgModule, and will transparently add those routes to the main configuration.