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

javiertury · Jun 3, 2020 · 9a3349f · 9a3349f
1 parent ba0bffa
commit 9a3349f
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git 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>
+  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
@@ -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
           }
         },