feat(view): allow passing props as a function

diff --git a/__tests__/RouterView.spec.ts b/__tests__/RouterView.spec.ts
index fdb28b65b351642e62d20437d785e7d38b9b009f..b9397ab8fb66856856ade12761c1f35d1f8816cf 100644 (file)
--- a/__tests__/RouterView.spec.ts
+++ b/__tests__/RouterView.spec.ts
@@ -100,11 +100,28 @@ const routes = createRoutes({
     matched: [
       {
         components: { default: components.WithProps },
-        path: '/users/:id',
+        path: '/props/:id',
         props: { id: 'foo', other: 'fixed' },
       },
     ],
   },
+
+  withFnProps: {
+    fullPath: '/props/1',
+    name: undefined,
+    path: '/props/1',
+    query: { q: 'page' },
+    params: { id: '1' },
+    hash: '',
+    meta: {},
+    matched: [
+      {
+        components: { default: components.WithProps },
+        path: '/props/:id',
+        props: to => ({ id: Number(to.params.id) * 2, other: to.query.q }),
+      },
+    ],
+  },
 })
 
 describe('RouterView', () => {
@@ -194,4 +211,9 @@ describe('RouterView', () => {
     const { el } = factory(routes.withIdAndOther)
     expect(el.innerHTML).toBe(`<div>id:foo;other:fixed</div>`)
   })
+
+  it('can pass a function as props', async () => {
+    const { el } = factory(routes.withFnProps)
+    expect(el.innerHTML).toBe(`<div>id:2;other:page</div>`)
+  })
 })

diff --git a/src/components/View.ts b/src/components/View.ts
index 341e2dc2fbbf71231f1fd20859a324c6ddf7f30e..aca948df0ba04f7132ff029b51903a7deb651f10 100644 (file)
--- a/src/components/View.ts
+++ b/src/components/View.ts
@@ -41,7 +41,7 @@ export const View = defineComponent({
       if (!props) return {}
       if (props === true) return route.value.params
 
-      return props
+      return typeof props === 'object' ? props : props(route.value)
     })
 
     provide(matchedRouteKey, matchedRoute)

diff --git a/src/types/index.ts b/src/types/index.ts
index fd3cd6b15e27b40f325e2792018a2c448b1ebe2e..173118fb18a42c45e018893d6325d159104dc036 100644 (file)
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -118,7 +118,10 @@ export interface RouteRecordCommon {
   path: string
   alias?: string | string[]
   name?: string
-  props?: boolean | Record<string, any>
+  props?:
+    | boolean
+    | Record<string, any>
+    | ((to: RouteLocationNormalized) => Record<string, any>)
   // TODO: beforeEnter has no effect with redirect, move and test
   beforeEnter?: NavigationGuard | NavigationGuard[]
   meta?: Record<string | number | symbol, any>