feat(view): allow passing props as a function

__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>`)
+  })
 })

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)

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>