docs: improve examples without component option

Author: posva

docs/guide/advanced/transitions.md

@@ -18,8 +18,16 @@ The above usage will apply the same transition for all routes. If you want each
 
 ```js
 const routes = [
-  { path: '/custom-transition', meta: { transition: 'slide-left' } },
-  { path: '/other-transition', meta: { transition: 'slide-right' } },
+  {
+    path: '/custom-transition',
+    component: PanelLeft,
+    meta: { transition: 'slide-left' },
+  },
+  {
+    path: '/other-transition',
+    component: PanelRight,
+    meta: { transition: 'slide-right' },
+  },
 ]
 ```
 

docs/guide/essentials/dynamic-matching.md

@@ -82,9 +82,9 @@ Regular params will only match characters in between url fragments, separated by
 ```js
 const routes = [
   // will match everything and put it under `$route.params.pathMatch`
-  { path: '/:pathMatch(.*)*', name: 'NotFound' },
+  { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
   // will match anything starting with `/user-` and put it under `$route.params.afterUser`
-  { path: '/user-:afterUser(.*)' },
+  { path: '/user-:afterUser(.*)', component: UserGeneric },
 ]
 ```
 

docs/guide/essentials/redirect-and-alias.md

@@ -36,6 +36,8 @@ const routes = [
 
 Note that **[Navigation Guards](../advanced/navigation-guards.md) are not applied on the route that redirects, only on its target**. e.g. In the example below, adding a `beforeEnter` guard to the `/home` route would not have any effect.
 
+When writing a `redirect`, you can omit the `component` option because it is never directly reached so there is no component to render. The only exception are [nested routes](./nested-routes.md): if a route record has `children` and a `redirect` property, it should also have a `component` property.
+
 ### Relative redirecting
 
 It's also possible to redirect to a relative ___location:
@@ -70,6 +72,7 @@ An alias gives you the freedom to map a UI structure to an arbitrary URL, instea
 const routes = [
   {
     path: '/users',
+    component: UsersLayout,
     children: [
       // this will render the UserList for these 3 URLs
       // - /users
@@ -87,6 +90,7 @@ If your route has parameters, make sure to include them in any absolute alias:
 const routes = [
   {
     path: '/users/:id',
+    component: UsersByIdLayout,
     children: [
       // this will render the UserDetails for these 3 URLs
       // - /users/24

docs/guide/essentials/route-matching-syntax.md

@@ -2,6 +2,10 @@
 
 Most applications will use static routes like `/about` and dynamic routes like `/users/:userId` like we just saw in [Dynamic Route Matching](./dynamic-matching.md), but Vue Router has much more to offer!
 
+:::tip
+For the sake of simplicity, all, route records **are omitting the `component` property** to focus on the `path` value.
+:::
+
 ## Custom Regexp in params
 
 When defining a param like `:userId`, we internally use the following regexp `([^/]+)` (at least one character that isn't a slash `/`) to extract params from URLs. This works well unless you need to differentiate two routes based on the param content. Imagine two routes `/:orderId` and `/:productName`, both would match the exact same URLs, so we need a way to differentiate them. The easiest way would be to add a static section to the path that differentiates them:

docs/guide/migration/index.md

@@ -32,11 +32,11 @@ Pushing or resolving a named route without its required params will throw an err
 
 ```js
 // given the following route:
-const routes = [{ path: '/users/:id', name: 'users' }]
+const routes = [{ path: '/users/:id', name: 'user', component: UserDetails }]
 
 // Missing the `id` param will fail
-router.push({ name: 'users' })
-router.resolve({ name: 'users' })
+router.push({ name: 'user' })
+router.resolve({ name: 'user' })
 ```
 
 **Reason**: Same as above.
@@ -50,9 +50,10 @@ const routes = [
   {
     path: '/dashboard',
     name: 'dashboard-parent',
+    component: DashboardParent
     children: [
-      { path: '', name: 'dashboard' },
-      { path: 'settings', name: 'dashboard-settings' },
+      { path: '', name: 'dashboard', component: DashboardDefault },
+      { path: 'settings', name: 'dashboard-settings', component: DashboardSettings },
     ],
   },
 ]
@@ -70,10 +71,11 @@ This has an important side effect about children `redirect` records like these:
 const routes = [
   {
     path: '/parent',
+    component: Parent,
     children: [
       // this would now redirect to `/home` instead of `/parent/home`
       { path: '', redirect: 'home' },
-      { path: 'home' },
+      { path: 'home', component: Home },
     ],
   },
 ]
@@ -152,9 +154,9 @@ Catch all routes (`*`, `/*`) must now be defined using a parameter with a custom
 const routes = [
   // pathMatch is the name of the param, e.g., going to /not/found yields
   // { params: { pathMatch: ['not', 'found'] }}
-  { path: '/:pathMatch(.*)*', name: 'not-found' },
+  { path: '/:pathMatch(.*)*', name: 'not-found', component: NotFound },
   // if you omit the last `*`, the `/` character in params will be encoded when resolving or pushing
-  { path: '/:pathMatch(.*)', name: 'bad-not-found' },
+  { path: '/:pathMatch(.*)', name: 'bad-not-found', component: NotFound },
 ]
 // bad example:
 router.resolve({