interface

Un objeto de configuración que define una única ruta. Un conjunto de rutas se recopilan en un Routes matriz para definir una Router configuración. El enrutador intenta hacer coincidir segmentos de una URL determinada con cada ruta, utilizando las opciones de configuración definidas en este objeto.

Ver más…

interface Route 
  path?: string
  pathMatch?: string
  matcher?: UrlMatcher
  component?: Type
  redirectTo?: string
  outlet?: string
  canActivate?: any[]
  canActivateChild?: any[]
  canDeactivate?: any[]
  canLoad?: any[]
  data?: Data
  resolve?: ResolveData
  children?: Routes
  loadChildren?: LoadChildren
  runGuardsAndResolvers?: RunGuardsAndResolvers

Descripción

Admite rutas estáticas, parametrizadas, de redireccionamiento y comodines, así como datos de ruta personalizados y métodos de resolución.

Para obtener información de uso detallada, consulte la Guía de enrutamiento.

Más información disponible en las Notas de uso …

Propiedades

Propiedad Descripción
path?: string

El camino al que enfrentarse. No se puede utilizar junto con un personalizado matcher función. Una cadena de URL que utiliza la notación de coincidencia del enrutador. Puede ser un comodín (**) que coincida con cualquier URL (consulte las Notas de uso a continuación). El valor predeterminado es “/” (la ruta raíz).
pathMatch?: string

La estrategia de búsqueda de rutas, una de “prefijo” o “completa”. El valor predeterminado es ‘prefijo’.

De forma predeterminada, el enrutador verifica los elementos de la URL desde la izquierda para ver si la URL coincide con una ruta determinada y se detiene cuando hay una coincidencia. Por ejemplo, ‘/ team / 11 / user’ coincide con ‘team /: id’.

La estrategia de coincidencia de ruta “completa” coincide con la URL completa. Es importante hacer esto al redirigir rutas de ruta vacía. De lo contrario, debido a que una ruta vacía es un prefijo de cualquier URL, el enrutador aplicaría la redirección incluso cuando navegue al destino de la redirección, creando un bucle sin fin.
matcher?: UrlMatcher

Una función personalizada de coincidencia de URL. No se puede utilizar junto con path.
component?: Type

El componente para instanciar cuando la ruta coincide. Puede estar vacío si las rutas secundarias especifican componentes.
redirectTo?: string

Una URL a la que redirigir cuando la ruta coincida. Absoluto si la URL comienza con una barra inclinada (/); de lo contrario, es relativa a la ruta URL. Cuando no está presente, el enrutador no redirige.
outlet?: string

Nombre de un RouterOutlet objeto donde se puede colocar el componente cuando la ruta coincide.
canActivate?: any[]

Una matriz de tokens de inyección de dependencia que se utilizan para buscar CanActivate() controladores, para determinar si el usuario actual puede activar el componente. De forma predeterminada, cualquier usuario puede activar.
canActivateChild?: any[]

Una matriz de tokens DI utilizados para buscar CanActivateChild() handlers, para determinar si el usuario actual puede activar un hijo del componente. De forma predeterminada, cualquier usuario puede activar a un niño.
canDeactivate?: any[]

Una matriz de tokens DI utilizados para buscar CanDeactivate() handlers, para determinar si el usuario actual puede desactivar el componente. De forma predeterminada, cualquier usuario puede desactivar.
canLoad?: any[]

Una matriz de tokens DI utilizados para buscar CanLoad() handlers, para determinar si el usuario actual puede cargar el componente. De forma predeterminada, cualquier usuario puede cargar.
data?: Data

Datos adicionales definidos por el desarrollador proporcionados al componente a través de ActivatedRoute. De forma predeterminada, no se transfieren datos adicionales.
resolve?: ResolveData

Un mapa de tokens DI utilizados para buscar resolutores de datos. Ver Resolve.
children?: Routes

Una matriz de niño Route objetos que especifica una configuración de ruta anidada.
loadChildren?: LoadChildren

Un objeto que especifica rutas secundarias cargadas de forma diferida.
runGuardsAndResolvers?: RunGuardsAndResolvers

Define cuándo se ejecutarán los guardias y resolutores. Uno de

  • paramsOrQueryParamsChange : Se ejecuta cuando cambian los parámetros de la consulta.
  • always : Ejecutar en cada ejecución. De forma predeterminada, los guardias y los resolutores solo se ejecutan cuando cambian los parámetros de la matriz de la ruta.

Notas de uso

Configuración sencilla

La siguiente ruta especifica que al navegar a, por ejemplo, /team/11/user/bob, el enrutador crea el componente ‘Equipo’ con el componente secundario ‘Usuario’ en él.

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

Múltiples salidas

La siguiente ruta crea componentes hermanos con múltiples salidas. Al navegar a /team/11(aux:chat/jim), el enrutador crea el componente ‘Equipo’ junto al componente ‘Chat’. El componente ‘Chat’ se coloca en la salida ‘auxiliar’.

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

Comodines

La siguiente ruta utiliza la notación comodín para especificar un componente del que siempre se crea una instancia, independientemente de hacia dónde navegue.

[
  path: '**',
  component: WildcardComponent
]

Redireccionamientos

La siguiente ruta usa el redirectTo propiedad para ignorar un segmento de una URL determinada al buscar una ruta secundaria.

Al navegar a ‘/ team / 11 / legacy / user / jim’, el enrutador cambia el segmento de URL ‘/ team / 11 / legacy / user / jim’ a ‘/ team / 11 / user / jim’, y luego crea una instancia del Componente de equipo con el componente secundario Usuario en él.

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

La ruta de redireccionamiento puede ser relativa, como se muestra en este ejemplo, o absoluta. Si cambiamos el redirectTo en el ejemplo para el segmento de URL absoluto ‘/ usuario /: nombre’, la URL del resultado también es absoluta, ‘/ usuario / jim’.

Camino vacío

Las configuraciones de ruta de ruta vacía se pueden utilizar para crear instancias de componentes que no ‘consumen’ ningún segmento de URL.

En la siguiente configuración, al navegar a /team/11, el enrutador crea una instancia del componente ‘AllUsers’.

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

Las rutas de caminos vacíos pueden tener hijos. En el siguiente ejemplo, al navegar a /team/11/user/jim, el enrutador crea una instancia del componente contenedor con el componente de usuario en él.

Tenga en cuenta que una ruta de ruta vacía hereda los parámetros y datos de su padre.

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

Estrategia de emparejamiento

La estrategia de coincidencia de ruta predeterminada es ‘prefijo’, lo que significa que el enrutador verifica los elementos de la URL desde la izquierda para ver si la URL coincide con una ruta especificada. Por ejemplo, ‘/ team / 11 / user’ coincide con ‘team /: id’.

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

Puede especificar la estrategia de coincidencia de ruta ‘completa’ para asegurarse de que la ruta cubra toda la URL no consumida. Es importante hacer esto al redirigir rutas de ruta vacía. De lo contrario, debido a que una ruta vacía es un prefijo de cualquier URL, el enrutador aplicaría la redirección incluso cuando navegue al destino de la redirección, creando un bucle sin fin.

En el siguiente ejemplo, proporcionando el ‘completo’ pathMatch La estrategia asegura que el enrutador aplica la redirección si y solo si navega a ‘/’.

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

Rutas sin componentes

Puede compartir parámetros entre componentes hermanos. Por ejemplo, suponga que dos componentes hermanos deben ir uno al lado del otro, y ambos requieren un parámetro de ID. Puede lograr esto utilizando una ruta que no especifique un componente en el nivel superior.

En el siguiente ejemplo, ‘MainChild’ y ‘AuxChild’ son hermanos. Al navegar a ‘parent / 10 / (a ​​// aux: b)’, la ruta crea una instancia de los componentes secundarios principales y auxiliares uno al lado del otro. Para que esto funcione, el componente de la aplicación debe tener definidas las salidas primaria y auxiliar.

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

El enrutador fusiona los parámetros, los datos y la resolución del padre sin componentes en los parámetros, los datos y la resolución de los hijos.

Esto es especialmente útil cuando los componentes secundarios se definen con una cadena de ruta vacía, como en el siguiente ejemplo. Con esta configuración, navegar a ‘/ parent / 10’ crea los componentes secundarios y auxiliares principales.

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

Carga lenta

La carga diferida acelera el tiempo de carga de la aplicación al dividir la aplicación en varios paquetes y cargarlos a pedido. Para utilizar la carga diferida, proporcione el loadChildren propiedad en el Route objeto, en lugar del children propiedad.

Dada la siguiente ruta de ejemplo, el enrutador cargará de forma diferida el módulo asociado a pedido utilizando el sistema de importación nativo del navegador.

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