Routelink

使用说明link

简单配置link

Simple Configurationlink

以下路由指定在导航到 /team/11/user/bob 时，路由器会在其中创建带有 'User' 子组件的 'Team' 组件。

The following route specifies that when navigating to, for example, /team/11/user/bob, the router creates the 'Team' component with the 'User' child component in it.

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

多重出口link

Multiple Outletslink

以下路由创建具有多个出口的兄弟组件。当导航到 /team/11(aux:chat/jim) 时，路由器会在 'Chat' 组件旁边创建 'Team' 组件。 'Chat' 组件放置在 'aux' 出口中。

The following route creates sibling components with multiple outlets. When navigating to /team/11(aux:chat/jim), the router creates the 'Team' component next to the 'Chat' component. The 'Chat' component is placed into the 'aux' outlet.

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

通配符link

Wild Cardslink

以下路由使用通配符表示法来指定始终实例化的组件，无论你导航到何处。

The following route uses wild-card notation to specify a component that is always instantiated regardless of where you navigate to.

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

重定向link

Redirectslink

当寻找子路径时，以下路由使用 redirectTo 属性忽略给定 URL 的一部分。

The following route uses the redirectTo property to ignore a segment of a given URL when looking for a child path.

导航到 '/team/11/legacy/user/jim' 时，路由器将 URL 段 '/team/11/legacy/user/jim' 更改为 '/team/11/user/jim'，然后实例化 Team 组件以及其中的 User 子组件。

When navigating to '/team/11/legacy/user/jim', the router changes the URL segment '/team/11/legacy/user/jim' to '/team/11/user/jim', and then instantiates the Team component with the User child component in it.

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

重定向路径可以是相对的（如本示例所示），也可以是绝对的。 redirectTo 值更改为绝对 URL 段 '/user/:name'，则结果 URL 也是绝对 URL，'/user/jim'。

The redirect path can be relative, as shown in this example, or absolute. If we change the redirectTo value in the example to the absolute URL segment '/user/:name', the result URL is also absolute, '/user/jim'.

空路径link

Empty Pathlink

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

Empty-path route configurations can be used to instantiate components that do not 'consume' any URL segments.

在下列配置中，当导航到 /team/11 时，路由器会实例化 'AllUsers' 组件。

In the following configuration, when navigating to /team/11, the router instantiates the 'AllUsers' component.

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

空路径路由可以有子路由。在以下示例中，当导航到 /team/11/user/jim 时，路由器会实例化带有用户组件的包装器组件。

Empty-path routes can have children. In the following example, when navigating to /team/11/user/jim, the router instantiates the wrapper component with the user component in it.

请注意，空路径路由会继承其父级的参数和数据。

Note that an empty path route inherits its parent's parameters and data.

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

匹配策略link

Matching Strategylink

默认的路径匹配策略是 'prefix'，这意味着路由器从左开始检查 URL 元素以查看 URL 是否与指定的路径匹配。例如，'/team/11/user' 与 'team/:id' 匹配。

The default path-match strategy is 'prefix', which means that the router checks URL elements from the left to see if the URL matches a specified path. For example, '/team/11/user' matches 'team/:id'.

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

你可以将路径匹配策略指定为 'full'，以确保路径覆盖整个未使用的 URL。重定向到空路径路由时，这样做很重要。否则，因为空路径是任何 URL 的前缀，所以路由器即使在导航到重定向目标时又会被再次重定向，从而造成无限循环。

You can specify the path-match strategy 'full' to make sure that the path covers the whole unconsumed URL. It is important to do this when redirecting empty-path routes. Otherwise, because an empty path is a prefix of any URL, the router would apply the redirect even when navigating to the redirect destination, creating an endless loop.

在以下示例中，提供 'full' pathMatch 策略可确保路由器仅在导航到 '/' 时才应用重定向。

In the following example, supplying the 'full' pathMatch strategy ensures that the router applies the redirect if and only if navigating to '/'.

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

无组件路由link

Componentless Routeslink

你可以在同级组件之间共享参数。例如，假设两个同级组件应该彼此相邻，并且它们两个都需要 ID 参数。你可以使用不在顶层指定组件的路由来完成此操作。

You can share parameters between sibling components. For example, suppose that two sibling components should go next to each other, and both of them require an ID parameter. You can accomplish this using a route that does not specify a component at the top level.

在以下示例中，'MainChild' 和 'AuxChild' 是同级。当导航到 'parent/10/(a//aux:b)' 时，该路由会实例化彼此相邻的主要子组件和 aux 子组件。为此，应用程序组件必须定义主要和辅助出口。

In the following example, 'MainChild' and 'AuxChild' are siblings. When navigating to 'parent/10/(a//aux:b)', the route instantiates the main child and aux child components next to each other. For this to work, the application component must have the primary and aux outlets defined.

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

路由器将无组件父级的参数、数据和解析结果合并为子级的参数、数据和解析结果。

The router merges the parameters, data, and resolve of the componentless parent into the parameters, data, and resolve of the children.

当用空路径字符串定义子组件时，这特别有用，如以下示例所示。使用此配置，导航到 '/parent/10' 将创建主要子组件和 aux 组件。

This is especially useful when child components are defined with an empty path string, as in the following example. With this configuration, navigating to '/parent/10' creates the main child and aux components.

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

惰性加载link

Lazy Loadinglink

惰性加载通过将应用程序拆分为多个包并按需加载它们来加快应用程序加载时间。要使用惰性加载，请在 Route 中提供 loadChildren 属性，而不是 children 属性。

Lazy loading speeds up application load time by splitting the application into multiple bundles and loading them on demand. To use lazy loading, provide the loadChildren property in the Route object, instead of the children property.

给定以下示例路由，路由器将使用浏览器原生导入体系按需惰性加载相关模块。

Given the following example route, the router will lazy load the associated module on demand using the browser native import system.

      
        content_copy
      
      [{
  path: 'lazy',
  loadChildren: () => import('./lazy-route/lazy.module').then(mod => mod.LazyModule),
}];