From dab86c5263c077b486de6438927740a78c72c71c Mon Sep 17 00:00:00 2001
From: javiertury <javiertury@gmail.com>
Date: Thu, 4 Jun 2020 12:31:01 +0200
Subject: [PATCH] feat(types): RouterConfig for multiple components (#3217)
 (#3218)

* feat(types): RouterConfig for multiple components (#3217)

* Apply suggestions from code review

Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com>
---
 types/router.d.ts   | 19 ++++++++++++++-----
 types/test/index.ts |  3 +++
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/types/router.d.ts b/types/router.d.ts
index 424a48430..09bca5032 100644
--- a/types/router.d.ts
+++ b/types/router.d.ts
@@ -89,21 +89,30 @@ export interface PathToRegexpOptions {
   end?: boolean
 }
 
-export interface RouteConfig {
+interface _RouteConfigBase {
   path: string
   name?: string
-  component?: Component
-  components?: Dictionary<Component>
   redirect?: RedirectOption
   alias?: string | string[]
-  children?: RouteConfig[]
   meta?: any
   beforeEnter?: NavigationGuard
-  props?: boolean | Object | RoutePropsFunction
   caseSensitive?: boolean
   pathToRegexpOptions?: PathToRegexpOptions
 }
 
+interface RouteConfigSingleView extends _RouteConfigBase {
+  component?: Component
+  props?: boolean | Object | RoutePropsFunction
+}
+
+interface RouteConfigMultipleViews extends _RouteConfigBase {
+  components?: Dictionary<Component>
+  children?: RouteConfig[]
+  props?: Dictionary<boolean | Object | RoutePropsFunction>
+}
+
+export type RouteConfig = RouteConfigSingleView | RouteConfigMultipleViews
+
 export interface RouteRecord {
   path: string
   regex: RegExp
diff --git a/types/test/index.ts b/types/test/index.ts
index 4afa858b0..328e8c980 100644
--- a/types/test/index.ts
+++ b/types/test/index.ts
@@ -8,6 +8,7 @@ Vue.use(VueRouter)
 const Home = { template: '<div>home</div>' }
 const Foo = { template: '<div>foo</div>' }
 const Bar = { template: '<div>bar</div>' }
+const Abc = { template: '<div>abc</div>' }
 const Async = () => Promise.resolve({ template: '<div>async</div>' })
 
 const Hook: ComponentOptions<Vue> = {
@@ -76,6 +77,7 @@ const router = new VueRouter({
           components: {
             default: Foo,
             bar: Bar,
+            abc: Abc,
             asyncComponent: Async
           },
           meta: { auth: true },
@@ -88,6 +90,7 @@ const router = new VueRouter({
           props: {
             default: true,
             bar: { id: 123 },
+            abc: route => route.params,
             asyncComponent: (route: Route) => route.params
           }
         },