docs: Move router tutorial (toh) from router.md to new file (#37979)

In an effort to make angular documentation easier for users to read,
we are moving the router tutorial currently in router.md to a new file.
To support this change, we have done the following:

* Update files to fix any broken links caused by moving the file
* Updated the new file to follow tutorial guidelines
* Add the new file to the table of  contents under, Tutorials.

PR Close #37979

.pullapprove.yml

@@ -533,6 +533,7 @@ groups:
           'packages/examples/router/**',
           'aio/content/guide/router.md',
           'aio/content/guide/router-tutorial.md',
+          'aio/content/guide/router-tutorial-toh.md',
           'aio/content/examples/router-tutorial/**',
           'aio/content/examples/router/**',
           'aio/content/images/guide/router/**'

aio/content/guide/deployment.md

@@ -320,7 +320,7 @@ You can dramatically reduce launch time by only loading the application modules
 absolutely must be present when the app starts.
 
 Configure the Angular Router to defer loading of all other modules (and their associated code), either by
-[waiting until the app has launched](guide/router#preloading  "Preloading")
+[waiting until the app has launched](guide/router-tutorial-toh#preloading  "Preloading")
 or by [_lazy loading_](guide/router#lazy-loading "Lazy loading")
 them on demand.
 

aio/content/guide/lazy-loading-ngmodules.md

@@ -311,7 +311,7 @@ ngOnInit() {
 }
 </code-example>
 
-For more information with a working example, see the [routing tutorial section on preloading](guide/router#preloading-background-loading-of-feature-areas).
+For more information with a working example, see the [routing tutorial section on preloading](guide/router-tutorial-toh#preloading-background-loading-of-feature-areas).
 
 
 <hr>

aio/content/guide/testing-components-scenarios.md

@@ -1120,7 +1120,7 @@ for the `id` to change during its lifetime.
 
 <div class="alert is-helpful">
 
-The [ActivatedRoute in action](guide/router#activated-route-in-action) section of the [Router](guide/router) guide covers `ActivatedRoute.paramMap` in more detail.
+The [ActivatedRoute in action](guide/router-tutorial-toh#activated-route-in-action) section of the [Router tutorial: tour of heroes](guide/router-tutorial-toh) guide covers `ActivatedRoute.paramMap` in more detail.
 
 </div>
 

aio/content/navigation.json

@@ -718,9 +718,20 @@
       "tooltip": "End-to-end tutorials for learning Angular concepts and patterns.",
       "children": [
         {
-          "url": "guide/router-tutorial",
-          "title": "Using Angular Routes in a Single-page Application",
-          "tooltip": "A tutorial that covers many patterns associated with Angular routing."
+          "title": "Routing",
+          "tooltip": "End-to-end tutorials for learning about Angular's router.",
+          "children": [
+            {
+              "url": "guide/router-tutorial",
+              "title": "Using Angular Routes in a Single-page Application",
+              "tooltip": "A tutorial that covers many patterns associated with Angular routing."
+            },
+            {
+              "url": "guide/router-tutorial-toh",
+              "title": "Router tutorial: tour of heroes",
+              "tooltip": "Explore how to use Angular's router. Based on the Tour of Heroes example."
+            }
+          ]
         },
         {
           "url": "guide/forms",

packages/router/src/events.ts

@@ -127,7 +127,7 @@ export class NavigationEnd extends RouterEvent {
 /**
  * An event triggered when a navigation is canceled, directly or indirectly.
  *
- * This can happen when a [route guard](guide/router#milestone-5-route-guards)
+ * This can happen when a [route guard](guide/router-tutorial-toh#milestone-5-route-guards)
  * returns `false` or initiates a redirect by returning a `UrlTree`.
  *
  * @publicApi