5 lines
23 KiB
JSON
5 lines
23 KiB
JSON
{
|
|
"id": "api/router/Route",
|
|
"title": "Route",
|
|
"contents": "\n\n<article>\n <div class=\"breadcrumb-container\">\n <div class=\"breadcrumb\">\n <script type=\"application/ld+json\">\n {\n \"@context\": \"http://schema.org\",\n \"@type\": \"BreadcrumbList\",\n \"itemListElement\": [\n { \"@type\": \"ListItem\", \"position\": 1, \"item\": { \"@id\": \"https://angular.io//api\", \"name\": \"API\" } },\n { \"@type\": \"ListItem\", \"position\": 2, \"item\": { \"@id\": \"https://angular.io/api/router\", \"name\": \"@angular/router\" } },\n { \"@type\": \"ListItem\", \"position\": 3, \"item\": { \"@id\": \"https://angular.io/api/router/Route\", \"name\": \"Route\" } }\n ]\n }\n </script>\n <a href=\"/api\">API</a> > <a href=\"api/router\">@angular/router</a>\n </div>\n <div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/packages/router/src/config.ts?message=docs(router)%3A%20describe%20your%20change...#L159-L491\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n <a href=\"https://github.com/angular/angular/tree/12.0.0-next.7/packages/router/src/config.ts#L159-L491\" aria-label=\"View Source\" title=\"View Source\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">code</i></a>\n</div>\n </div>\n \n <header class=\"api-header\">\n <h1 id=\"route\">Route<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/router/Route#route\"><i class=\"material-icons\">link</i></a></h1>\n \n <label class=\"api-type-label interface\">interface</label>\n \n \n \n </header>\n \n <aio-toc class=\"embedded\"></aio-toc>\n\n <div class=\"api-body\">\n \n <section class=\"short-description\">\n <p>A configuration object that defines a single route.\nA set of routes are collected in a <code><a href=\"api/router/Routes\" class=\"code-anchor\">Routes</a></code> array to define a <code><a href=\"api/router/Router\" class=\"code-anchor\">Router</a></code> configuration.\nThe router attempts to match segments of a given URL against each route,\nusing the configuration options defined in this object.</p>\n\n <p><a href=\"api/router/Route#description\">See more...</a></p>\n </section>\n \n \n <section class=\"interface-overview\">\n<code-example language=\"ts\" hidecopy=\"true\">\ninterface <a href=\"api/router/Route\" class=\"code-anchor\">Route</a> {\n <a class=\"code-anchor\" href=\"api/router/Route#path\"><span class=\"member-name\">path</span>?: string</a>\n <a class=\"code-anchor\" href=\"api/router/Route#pathMatch\"><span class=\"member-name\">pathMatch</span>?: string</a>\n <a class=\"code-anchor\" href=\"api/router/Route#matcher\"><span class=\"member-name\">matcher</span>?: UrlMatcher</a>\n <a class=\"code-anchor\" href=\"api/router/Route#component\"><span class=\"member-name\">component</span>?: Type<any></a>\n <a class=\"code-anchor\" href=\"api/router/Route#redirectTo\"><span class=\"member-name\">redirectTo</span>?: string</a>\n <a class=\"code-anchor\" href=\"api/router/Route#outlet\"><span class=\"member-name\">outlet</span>?: string</a>\n <a class=\"code-anchor\" href=\"api/router/Route#canActivate\"><span class=\"member-name\">canActivate</span>?: any[]</a>\n <a class=\"code-anchor\" href=\"api/router/Route#canActivateChild\"><span class=\"member-name\">canActivateChild</span>?: any[]</a>\n <a class=\"code-anchor\" href=\"api/router/Route#canDeactivate\"><span class=\"member-name\">canDeactivate</span>?: any[]</a>\n <a class=\"code-anchor\" href=\"api/router/Route#canLoad\"><span class=\"member-name\">canLoad</span>?: any[]</a>\n <a class=\"code-anchor\" href=\"api/router/Route#data\"><span class=\"member-name\">data</span>?: Data</a>\n <a class=\"code-anchor\" href=\"api/router/Route#resolve\"><span class=\"member-name\">resolve</span>?: ResolveData</a>\n <a class=\"code-anchor\" href=\"api/router/Route#children\"><span class=\"member-name\">children</span>?: Routes</a>\n <a class=\"code-anchor\" href=\"api/router/Route#loadChildren\"><span class=\"member-name\">loadChildren</span>?: LoadChildren</a>\n <a class=\"code-anchor\" href=\"api/router/Route#runGuardsAndResolvers\"><span class=\"member-name\">runGuardsAndResolvers</span>?: RunGuardsAndResolvers</a>\n}\n</code-example>\n\n \n \n\n\n \n \n\n</section>\n\n \n\n \n \n<section class=\"description\">\n <h2 id=\"description\">Description<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/router/Route#description\"><i class=\"material-icons\">link</i></a></h2>\n <p>Supports static, parameterized, redirect, and wildcard routes, as well as\ncustom route data and resolve methods.</p>\n<p>For detailed usage information, see the <a href=\"guide/router\">Routing Guide</a>.</p>\n\n <p>Further information available in the <a href=\"api/router/Route#usage-notes\">Usage Notes</a>...</p>\n</section>\n\n \n<section class=\"instance-properties\">\n <h2 id=\"properties\">Properties<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/router/Route#properties\"><i class=\"material-icons\">link</i></a></h2>\n <table class=\"is-full-width list-table property-table\">\n <thead>\n <tr>\n <th>Property</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"path\"></a>\n <code class=\"\"><span class=\"member-name\">path</span>?: string</code>\n </td>\n <td>\n \n <p>The path to match against. Cannot be used together with a custom <code>matcher</code> function.\nA URL string that uses router matching notation.\nCan be a wild card (<code>**</code>) that matches any URL (see Usage Notes below).\nDefault is \"/\" (the root path).</p>\n\n \n </td>\n </tr>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"pathMatch\"></a>\n <code class=\"\"><span class=\"member-name\">pathMatch</span>?: string</code>\n </td>\n <td>\n \n <p>The path-matching strategy, one of 'prefix' or 'full'.\nDefault is 'prefix'.</p>\n\n <p>By default, the router checks URL elements from the left to see if the URL\nmatches a given path, and stops when there is a match. For example,\n'/team/11/user' matches 'team/:id'.</p>\n<p>The path-match strategy 'full' matches against the entire URL.\nIt is important to do this when redirecting empty-path routes.\nOtherwise, because an empty path is a prefix of any URL,\nthe router would apply the redirect even when navigating\nto the redirect destination, creating an endless loop.</p>\n\n </td>\n </tr>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"matcher\"></a>\n <code class=\"\"><span class=\"member-name\">matcher</span>?: <a href=\"api/router/UrlMatcher\" class=\"code-anchor\">UrlMatcher</a></code>\n </td>\n <td>\n \n <p>A custom URL-matching function. Cannot be used together with <code>path</code>.</p>\n\n \n </td>\n </tr>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"component\"></a>\n <code class=\"\"><span class=\"member-name\">component</span>?: <a href=\"api/core/Type\" class=\"code-anchor\">Type</a><any></code>\n </td>\n <td>\n \n <p>The component to instantiate when the path matches.\nCan be empty if child routes specify components.</p>\n\n \n </td>\n </tr>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"redirectTo\"></a>\n <code class=\"\"><span class=\"member-name\">redirectTo</span>?: string</code>\n </td>\n <td>\n \n <p>A URL to redirect to when the path matches.\nAbsolute if the URL begins with a slash (/), otherwise relative to the path URL.\nWhen not present, router does not redirect.</p>\n\n \n </td>\n </tr>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"outlet\"></a>\n <code class=\"\"><span class=\"member-name\">outlet</span>?: string</code>\n </td>\n <td>\n \n <p>Name of a <code><a href=\"api/router/RouterOutlet\" class=\"code-anchor\">RouterOutlet</a></code> object where the component can be placed\nwhen the path matches.</p>\n\n \n </td>\n </tr>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"canActivate\"></a>\n <code class=\"\"><span class=\"member-name\">canActivate</span>?: any[]</code>\n </td>\n <td>\n \n <p>An array of dependency-injection tokens used to look up <code><a href=\"api/router/CanActivate\" class=\"code-anchor\">CanActivate</a>()</code>\nhandlers, in order to determine if the current user is allowed to\nactivate the component. By default, any user can activate.</p>\n\n \n </td>\n </tr>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"canActivateChild\"></a>\n <code class=\"\"><span class=\"member-name\">canActivateChild</span>?: any[]</code>\n </td>\n <td>\n \n <p>An array of DI tokens used to look up <code><a href=\"api/router/CanActivateChild\" class=\"code-anchor\">CanActivateChild</a>()</code> handlers,\nin order to determine if the current user is allowed to activate\na child of the component. By default, any user can activate a child.</p>\n\n \n </td>\n </tr>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"canDeactivate\"></a>\n <code class=\"\"><span class=\"member-name\">canDeactivate</span>?: any[]</code>\n </td>\n <td>\n \n <p>An array of DI tokens used to look up <code><a href=\"api/router/CanDeactivate\" class=\"code-anchor\">CanDeactivate</a>()</code>\nhandlers, in order to determine if the current user is allowed to\ndeactivate the component. By default, any user can deactivate.</p>\n\n \n </td>\n </tr>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"canLoad\"></a>\n <code class=\"\"><span class=\"member-name\">canLoad</span>?: any[]</code>\n </td>\n <td>\n \n <p>An array of DI tokens used to look up <code><a href=\"api/router/CanLoad\" class=\"code-anchor\">CanLoad</a>()</code>\nhandlers, in order to determine if the current user is allowed to\nload the component. By default, any user can load.</p>\n\n \n </td>\n </tr>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"data\"></a>\n <code class=\"\"><span class=\"member-name\">data</span>?: <a href=\"api/router/Data\" class=\"code-anchor\">Data</a></code>\n </td>\n <td>\n \n <p>Additional developer-defined data provided to the component via\n<code><a href=\"api/router/ActivatedRoute\" class=\"code-anchor\">ActivatedRoute</a></code>. By default, no additional data is passed.</p>\n\n \n </td>\n </tr>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"resolve\"></a>\n <code class=\"\"><span class=\"member-name\">resolve</span>?: <a href=\"api/router/ResolveData\" class=\"code-anchor\">ResolveData</a></code>\n </td>\n <td>\n \n <p>A map of DI tokens used to look up data resolvers. See <code><a href=\"api/router/Resolve\" class=\"code-anchor\">Resolve</a></code>.</p>\n\n \n </td>\n </tr>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"children\"></a>\n <code class=\"\"><span class=\"member-name\">children</span>?: <a href=\"api/router/Routes\" class=\"code-anchor\">Routes</a></code>\n </td>\n <td>\n \n <p>An array of child <code><a href=\"api/router/Route\" class=\"code-anchor\">Route</a></code> objects that specifies a nested route\nconfiguration.</p>\n\n \n </td>\n </tr>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"loadChildren\"></a>\n <code class=\"\"><span class=\"member-name\">loadChildren</span>?: <a href=\"api/router/LoadChildren\" class=\"code-anchor\">LoadChildren</a></code>\n </td>\n <td>\n \n <p>An object specifying lazy-loaded child routes.</p>\n\n \n </td>\n </tr>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"runGuardsAndResolvers\"></a>\n <code class=\"\"><span class=\"member-name\">runGuardsAndResolvers</span>?: <a href=\"api/router/RunGuardsAndResolvers\" class=\"code-anchor\">RunGuardsAndResolvers</a></code>\n </td>\n <td>\n \n <p>Defines when guards and resolvers will be run. One of</p>\n<ul>\n<li><code>paramsOrQueryParamsChange</code> : Run when query parameters change.</li>\n<li><code>always</code> : Run on every execution.\nBy default, guards and resolvers run only when the matrix\nparameters of the route change.</li>\n</ul>\n\n \n </td>\n </tr>\n \n </tbody>\n </table>\n</section>\n \n\n\n \n<section class=\"usage-notes\">\n <h2 id=\"usage-notes\">Usage notes<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/router/Route#usage-notes\"><i class=\"material-icons\">link</i></a></h2>\n <h3 id=\"simple-configuration\">Simple Configuration<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/router/Route#simple-configuration\"><i class=\"material-icons\">link</i></a></h3>\n<p>The following route specifies that when navigating to, for example,\n<code>/team/11/user/bob</code>, the router creates the 'Team' component\nwith the 'User' child component in it.</p>\n<code-example>\n[{\n path: 'team/:id',\n component: Team,\n children: [{\n path: 'user/:name',\n component: User\n }]\n}]\n</code-example>\n<h3 id=\"multiple-outlets\">Multiple Outlets<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/router/Route#multiple-outlets\"><i class=\"material-icons\">link</i></a></h3>\n<p>The following route creates sibling components with multiple outlets.\nWhen navigating to <code>/team/11(aux:chat/jim)</code>, the router creates the 'Team' component next to\nthe 'Chat' component. The 'Chat' component is placed into the 'aux' outlet.</p>\n<code-example>\n[{\n path: 'team/:id',\n component: Team\n}, {\n path: 'chat/:user',\n component: Chat\n outlet: 'aux'\n}]\n</code-example>\n<h3 id=\"wild-cards\">Wild Cards<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/router/Route#wild-cards\"><i class=\"material-icons\">link</i></a></h3>\n<p>The following route uses wild-card notation to specify a component\nthat is always instantiated regardless of where you navigate to.</p>\n<code-example>\n[{\n path: '**',\n component: WildcardComponent\n}]\n</code-example>\n<h3 id=\"redirects\">Redirects<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/router/Route#redirects\"><i class=\"material-icons\">link</i></a></h3>\n<p>The following route uses the <code>redirectTo</code> property to ignore a segment of\na given URL when looking for a child path.</p>\n<p>When navigating to '/team/11/legacy/user/jim', the router changes the URL segment\n'/team/11/legacy/user/jim' to '/team/11/user/jim', and then instantiates\nthe Team component with the User child component in it.</p>\n<code-example>\n[{\n path: 'team/:id',\n component: Team,\n children: [{\n path: 'legacy/user/:name',\n redirectTo: 'user/:name'\n }, {\n path: 'user/:name',\n component: User\n }]\n}]\n</code-example>\n<p>The redirect path can be relative, as shown in this example, or absolute.\nIf we change the <code>redirectTo</code> value in the example to the absolute URL segment '/user/:name',\nthe result URL is also absolute, '/user/jim'.</p>\n<h3 id=\"empty-path\">Empty Path<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/router/Route#empty-path\"><i class=\"material-icons\">link</i></a></h3>\n<p>Empty-path route configurations can be used to instantiate components that do not 'consume'\nany URL segments.</p>\n<p>In the following configuration, when navigating to\n<code>/team/11</code>, the router instantiates the 'AllUsers' component.</p>\n<code-example>\n[{\n path: 'team/:id',\n component: Team,\n children: [{\n path: '',\n component: AllUsers\n }, {\n path: 'user/:name',\n component: User\n }]\n}]\n</code-example>\n<p>Empty-path routes can have children. In the following example, when navigating\nto <code>/team/11/user/jim</code>, the router instantiates the wrapper component with\nthe user component in it.</p>\n<p>Note that an empty path route inherits its parent's parameters and data.</p>\n<code-example>\n[{\n path: 'team/:id',\n component: Team,\n children: [{\n path: '',\n component: WrapperCmp,\n children: [{\n path: 'user/:name',\n component: User\n }]\n }]\n}]\n</code-example>\n<h3 id=\"matching-strategy\">Matching Strategy<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/router/Route#matching-strategy\"><i class=\"material-icons\">link</i></a></h3>\n<p>The default path-match strategy is 'prefix', which means that the router\nchecks URL elements from the left to see if the URL matches a specified path.\nFor example, '/team/11/user' matches 'team/:id'.</p>\n<code-example>\n[{\n path: '',\n pathMatch: 'prefix', //default\n redirectTo: 'main'\n}, {\n path: 'main',\n component: Main\n}]\n</code-example>\n<p>You can specify the path-match strategy 'full' to make sure that the path\ncovers the whole unconsumed URL. It is important to do this when redirecting\nempty-path routes. Otherwise, because an empty path is a prefix of any URL,\nthe router would apply the redirect even when navigating to the redirect destination,\ncreating an endless loop.</p>\n<p>In the following example, supplying the 'full' <code>pathMatch</code> strategy ensures\nthat the router applies the redirect if and only if navigating to '/'.</p>\n<code-example>\n[{\n path: '',\n pathMatch: 'full',\n redirectTo: 'main'\n}, {\n path: 'main',\n component: Main\n}]\n</code-example>\n<h3 id=\"componentless-routes\">Componentless Routes<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/router/Route#componentless-routes\"><i class=\"material-icons\">link</i></a></h3>\n<p>You can share parameters between sibling components.\nFor example, suppose that two sibling components should go next to each other,\nand both of them require an ID parameter. You can accomplish this using a route\nthat does not specify a component at the top level.</p>\n<p>In the following example, 'MainChild' and 'AuxChild' are siblings.\nWhen navigating to 'parent/10/(a//aux:b)', the route instantiates\nthe main child and aux child components next to each other.\nFor this to work, the application component must have the primary and aux outlets defined.</p>\n<code-example>\n[{\n path: 'parent/:id',\n children: [\n { path: 'a', component: MainChild },\n { path: 'b', component: AuxChild, outlet: 'aux' }\n ]\n}]\n</code-example>\n<p>The router merges the parameters, data, and resolve of the componentless\nparent into the parameters, data, and resolve of the children.</p>\n<p>This is especially useful when child components are defined\nwith an empty path string, as in the following example.\nWith this configuration, navigating to '/parent/10' creates\nthe main child and aux components.</p>\n<code-example>\n[{\n path: 'parent/:id',\n children: [\n { path: '', component: MainChild },\n { path: '', component: AuxChild, outlet: 'aux' }\n ]\n}]\n</code-example>\n<h3 id=\"lazy-loading\">Lazy Loading<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/router/Route#lazy-loading\"><i class=\"material-icons\">link</i></a></h3>\n<p>Lazy loading speeds up application load time by splitting the application\ninto multiple bundles and loading them on demand.\nTo use lazy loading, provide the <code>loadChildren</code> property in the <code><a href=\"api/router/Route\" class=\"code-anchor\">Route</a></code> object,\ninstead of the <code>children</code> property.</p>\n<p>Given the following example route, the router will lazy load\nthe associated module on demand using the browser native import system.</p>\n<code-example>\n[{\n path: 'lazy',\n loadChildren: () => import('./lazy-route/lazy.module').then(mod => mod.LazyModule),\n}];\n</code-example>\n\n</section>\n\n\n\n </div>\n</article>\n\n<!-- links to this doc:\n - api/router\n - api/router/ActivatedRoute\n - api/router/ActivatedRouteSnapshot\n - api/router/CanActivate\n - api/router/CanActivateChild\n - api/router/CanDeactivate\n - api/router/CanLoad\n - api/router/Data\n - api/router/ExtraOptions\n - api/router/LoadChildrenCallback\n - api/router/NoPreloading\n - api/router/PreloadAllModules\n - api/router/PreloadingStrategy\n - api/router/ROUTES\n - api/router/Resolve\n - api/router/ResolveData\n - api/router/RouteConfigLoadEnd\n - api/router/RouteConfigLoadStart\n - api/router/Router\n - api/router/RouterModule\n - api/router/RouterOutlet\n - api/router/RouterOutletContract\n - api/router/Routes\n - api/router/RunGuardsAndResolvers\n - api/router/UrlMatcher\n - api/router/testing/setupTestingRouter\n - guide/router\n - guide/router-tutorial-toh\n - tutorial/toh-pt5\n-->\n<!-- links from this doc:\n - /api\n - api/core/Type\n - api/router\n - api/router/ActivatedRoute\n - api/router/CanActivate\n - api/router/CanActivateChild\n - api/router/CanDeactivate\n - api/router/CanLoad\n - api/router/Data\n - api/router/LoadChildren\n - api/router/Resolve\n - api/router/ResolveData\n - api/router/Route#canActivate\n - api/router/Route#canActivateChild\n - api/router/Route#canDeactivate\n - api/router/Route#canLoad\n - api/router/Route#children\n - api/router/Route#component\n - api/router/Route#componentless-routes\n - api/router/Route#data\n - api/router/Route#description\n - api/router/Route#empty-path\n - api/router/Route#lazy-loading\n - api/router/Route#loadChildren\n - api/router/Route#matcher\n - api/router/Route#matching-strategy\n - api/router/Route#multiple-outlets\n - api/router/Route#outlet\n - api/router/Route#path\n - api/router/Route#pathMatch\n - api/router/Route#properties\n - api/router/Route#redirectTo\n - api/router/Route#redirects\n - api/router/Route#resolve\n - api/router/Route#route\n - api/router/Route#runGuardsAndResolvers\n - api/router/Route#simple-configuration\n - api/router/Route#usage-notes\n - api/router/Route#wild-cards\n - api/router/Router\n - api/router/RouterOutlet\n - api/router/Routes\n - api/router/RunGuardsAndResolvers\n - api/router/UrlMatcher\n - guide/router\n - https://github.com/angular/angular/edit/master/packages/router/src/config.ts?message=docs(router)%3A%20describe%20your%20change...#L159-L491\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/router/src/config.ts#L159-L491\n-->"
|
|
} |