feat(view): allow props as object in record

diff --git a/__tests__/RouterView.spec.ts b/__tests__/RouterView.spec.ts
index 17dd39f778accf88df7227337780c426b837079f..fdb28b65b351642e62d20437d785e7d38b9b009f 100644 (file)
--- a/__tests__/RouterView.spec.ts
+++ b/__tests__/RouterView.spec.ts
@@ -74,9 +74,9 @@ const routes = createRoutes({
     matched: [{ components: { foo: components.Foo }, path: '/' }],
   },
   withParams: {
-    fullPath: '/users/3',
+    fullPath: '/users/1',
     name: undefined,
-    path: '/users/3',
+    path: '/users/1',
     query: {},
     params: { id: '1' },
     hash: '',
@@ -89,6 +89,22 @@ const routes = createRoutes({
       },
     ],
   },
+  withIdAndOther: {
+    fullPath: '/props/1',
+    name: undefined,
+    path: '/props/1',
+    query: {},
+    params: { id: '1' },
+    hash: '',
+    meta: {},
+    matched: [
+      {
+        components: { default: components.WithProps },
+        path: '/users/:id',
+        props: { id: 'foo', other: 'fixed' },
+      },
+    ],
+  },
 })
 
 describe('RouterView', () => {
@@ -173,4 +189,9 @@ describe('RouterView', () => {
     await tick()
     expect(el.innerHTML).toBe(`<div>User: 4</div>`)
   })
+
+  it('can pass an object as props', async () => {
+    const { el } = factory(routes.withIdAndOther)
+    expect(el.innerHTML).toBe(`<div>id:foo;other:fixed</div>`)
+  })
 })

diff --git a/__tests__/utils.ts b/__tests__/utils.ts
index 0a0b718c1d8c5865d395c2fa8e717be411cf85d6..6e2c3ac73f00b91a9278e6ba9ee8dac4c2dc1f31 100644 (file)
--- a/__tests__/utils.ts
+++ b/__tests__/utils.ts
@@ -95,6 +95,19 @@ export const components = {
       return h('div', {}, 'User: ' + this.id)
     },
   }),
+  WithProps: defineComponent({
+    props: {
+      id: {
+        default: 'default',
+      },
+      other: {
+        default: 'other',
+      },
+    },
+    render() {
+      return h('div', {}, `id:${this.id};other:${this.other}`)
+    },
+  }),
   Nested: {
     render: () => {
       const RouterView = resolveComponent('RouterView')

diff --git a/src/components/View.ts b/src/components/View.ts
index 2016759c18a4eb6cbc763bf751bac655c74eb6d7..341e2dc2fbbf71231f1fd20859a324c6ddf7f30e 100644 (file)
--- a/src/components/View.ts
+++ b/src/components/View.ts
@@ -37,9 +37,11 @@ export const View = defineComponent({
     )
 
     const propsData = computed(() => {
-      if (!matchedRoute.value.props) return {}
+      const { props } = matchedRoute.value
+      if (!props) return {}
+      if (props === true) return route.value.params
 
-      return route.value.params
+      return props
     })
 
     provide(matchedRouteKey, matchedRoute)

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