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 <[email protected]>

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

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
           }
         },