Skip to content

Commit dbe2344

Browse files
posvaposva
committed
feat: allow props for named views
1 parent bb9e5c9 commit dbe2344

File tree

9 files changed

+131
-42
lines changed

9 files changed

+131
-42
lines changed

‎__tests__/RouterView.spec.ts

+58-12
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,10 @@
33
*/
44
import { RouterView } from '../src/RouterView'
55
import { components, RouteLocationNormalizedLoose } from './utils'
6-
import { START_LOCATION_NORMALIZED } from '../src/types'
6+
import {
7+
START_LOCATION_NORMALIZED,
8+
RouteLocationNormalized,
9+
} from '../src/types'
710
import { markRaw } from 'vue'
811
import { mount, createMockedRoute } from './mount'
912
import { mockWarn } from 'jest-mock-warn'
@@ -21,6 +24,8 @@ function createRoutes<T extends Record<string, RouteLocationNormalizedLoose>>(
2124
return nonReactiveRoutes
2225
}
2326

27+
const props = { default: false }
28+
2429
const routes = createRoutes({
2530
root: {
2631
fullPath: '/',
@@ -31,7 +36,12 @@ const routes = createRoutes({
3136
hash: '',
3237
meta: {},
3338
matched: [
34-
{ components: { default: components.Home }, instances: {}, path: '/' },
39+
{
40+
components: { default: components.Home },
41+
instances: {},
42+
path: '/',
43+
props,
44+
},
3545
],
3646
},
3747
foo: {
@@ -43,7 +53,12 @@ const routes = createRoutes({
4353
hash: '',
4454
meta: {},
4555
matched: [
46-
{ components: { default: components.Foo }, instances: {}, path: '/foo' },
56+
{
57+
components: { default: components.Foo },
58+
instances: {},
59+
path: '/foo',
60+
props,
61+
},
4762
],
4863
},
4964
nested: {
@@ -55,8 +70,18 @@ const routes = createRoutes({
5570
hash: '',
5671
meta: {},
5772
matched: [
58-
{ components: { default: components.Nested }, instances: {}, path: '/' },
59-
{ components: { default: components.Foo }, instances: {}, path: 'a' },
73+
{
74+
components: { default: components.Nested },
75+
instances: {},
76+
path: '/',
77+
props,
78+
},
79+
{
80+
components: { default: components.Foo },
81+
instances: {},
82+
path: 'a',
83+
props,
84+
},
6085
],
6186
},
6287
nestedNested: {
@@ -68,9 +93,24 @@ const routes = createRoutes({
6893
hash: '',
6994
meta: {},
7095
matched: [
71-
{ components: { default: components.Nested }, instances: {}, path: '/' },
72-
{ components: { default: components.Nested }, instances: {}, path: 'a' },
73-
{ components: { default: components.Foo }, instances: {}, path: 'b' },
96+
{
97+
components: { default: components.Nested },
98+
instances: {},
99+
path: '/',
100+
props,
101+
},
102+
{
103+
components: { default: components.Nested },
104+
instances: {},
105+
path: 'a',
106+
props,
107+
},
108+
{
109+
components: { default: components.Foo },
110+
instances: {},
111+
path: 'b',
112+
props,
113+
},
74114
],
75115
},
76116
named: {
@@ -82,7 +122,7 @@ const routes = createRoutes({
82122
hash: '',
83123
meta: {},
84124
matched: [
85-
{ components: { foo: components.Foo }, instances: {}, path: '/' },
125+
{ components: { foo: components.Foo }, instances: {}, path: '/', props },
86126
],
87127
},
88128
withParams: {
@@ -99,7 +139,7 @@ const routes = createRoutes({
99139

100140
instances: {},
101141
path: '/users/:id',
102-
props: true,
142+
props: { default: true },
103143
},
104144
],
105145
},
@@ -117,7 +157,7 @@ const routes = createRoutes({
117157

118158
instances: {},
119159
path: '/props/:id',
120-
props: { id: 'foo', other: 'fixed' },
160+
props: { default: { id: 'foo', other: 'fixed' } },
121161
},
122162
],
123163
},
@@ -136,7 +176,12 @@ const routes = createRoutes({
136176

137177
instances: {},
138178
path: '/props/:id',
139-
props: to => ({ id: Number(to.params.id) * 2, other: to.query.q }),
179+
props: {
180+
default: (to: RouteLocationNormalized) => ({
181+
id: Number(to.params.id) * 2,
182+
other: to.query.q,
183+
}),
184+
},
140185
},
141186
],
142187
},
@@ -203,6 +248,7 @@ describe('RouterView', () => {
203248
components: { default: components.User },
204249
instances: {},
205250
path: '/users/:id',
251+
props,
206252
},
207253
],
208254
}

‎__tests__/matcher/records.spec.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ describe('normalizeRouteRecord', () => {
1717
meta: {},
1818
name: undefined,
1919
path: '/home',
20-
props: false,
20+
props: { default: false },
2121
})
2222
})
2323

@@ -41,7 +41,7 @@ describe('normalizeRouteRecord', () => {
4141
meta: { foo: true },
4242
name: 'name',
4343
path: '/home',
44-
props: false,
44+
props: { default: false },
4545
})
4646
})
4747

@@ -83,7 +83,7 @@ describe('normalizeRouteRecord', () => {
8383
meta: { foo: true },
8484
name: 'name',
8585
path: '/home',
86-
props: false,
86+
props: { one: false },
8787
})
8888
})
8989
})

‎__tests__/utils.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
RouteComponent,
99
RouteRecordRaw,
1010
RouteRecordName,
11+
_RouteRecordProps,
1112
} from '../src/types'
1213
import { h, ComponentOptions } from 'vue'
1314
import {
@@ -52,7 +53,7 @@ export interface RouteRecordViewLoose
5253
> {
5354
leaveGuards?: any
5455
instances: Record<string, any>
55-
props?: _RouteRecordBase['props']
56+
props: Record<string, _RouteRecordProps>
5657
aliasOf: RouteRecordViewLoose | undefined
5758
}
5859

‎playground/router.ts

+8-8
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export const router = createRouter({
2525
{
2626
path: '/',
2727
components: { default: Home, other: component },
28-
props: to => ({ waited: to.meta.waitedFor }),
28+
props: { default: to => ({ waited: to.meta.waitedFor }) },
2929
},
3030
{
3131
path: '/always-redirect',
@@ -60,18 +60,18 @@ export const router = createRouter({
6060
{
6161
path: '/children',
6262
name: 'WithChildren',
63-
component,
63+
component: Nested,
6464
children: [
65-
{ path: '', alias: 'alias', name: 'default-child', component },
66-
{ path: 'a', name: 'a-child', component },
65+
{ path: '', alias: 'alias', name: 'default-child', component: Nested },
66+
{ path: 'a', name: 'a-child', component: Nested },
6767
{
6868
path: 'b',
6969
name: 'b-child',
70-
component,
70+
component: Nested,
7171
children: [
72-
{ path: '', component },
73-
{ path: 'a2', component },
74-
{ path: 'b2', component },
72+
{ path: '', component: Nested },
73+
{ path: 'a2', component: Nested },
74+
{ path: 'b2', component: Nested },
7575
],
7676
},
7777
],

‎playground/views/Nested.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div>
33
<p>Nested level {{ level }}</p>
4-
<ul v-if="level === 1">
4+
<ul v-if="level === 1 && $route.name === 'Nested'">
55
<li>
66
<router-link to="/nested/nested">/nested/nested</router-link>
77
</li>

‎src/RouterView.ts

+7-4
Original file line numberDiff line numberDiff line change
@@ -52,11 +52,14 @@ export const RouterViewImpl = defineComponent({
5252
const propsData = computed(() => {
5353
// propsData only gets called if ViewComponent.value exists and it depends
5454
// on matchedRoute.value
55-
const { props } = matchedRoute.value!
56-
if (!props) return {}
57-
if (props === true) return route.value.params
55+
const componentProps = matchedRoute.value!.props[props.name]
56+
if (!componentProps) return {}
57+
// TODO: only add props declared in the component. all if no props
58+
if (componentProps === true) return route.value.params
5859

59-
return typeof props === 'object' ? props : props(route.value)
60+
return typeof componentProps === 'object'
61+
? componentProps
62+
: componentProps(route.value)
6063
})
6164

6265
provide(matchedRouteKey, matchedRoute)

‎src/matcher/index.ts

+29-5
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ import {
44
MatcherLocation,
55
isRouteName,
66
RouteRecordName,
7+
_RouteRecordProps,
8+
RouteRecordSingleView,
9+
RouteRecordMultipleViews,
710
} from '../types'
811
import { createRouterError, ErrorTypes, MatcherError } from '../errors'
912
import { createRouteRecordMatcher, RouteRecordMatcher } from './pathMatcher'
@@ -321,22 +324,43 @@ export function normalizeRouteRecord(
321324
redirect: record.redirect,
322325
}
323326
} else {
327+
const components =
328+
'components' in record ? record.components : { default: record.component }
324329
return {
325330
...commonInitialValues,
326331
beforeEnter: record.beforeEnter,
327-
props: record.props || false,
332+
props: normalizeRecordProps(record),
328333
children: record.children || [],
329334
instances: {},
330335
leaveGuards: [],
331336
updateGuards: [],
332-
components:
333-
'components' in record
334-
? record.components
335-
: { default: record.component },
337+
components,
336338
}
337339
}
338340
}
339341

342+
/**
343+
* Normalize the optional `props` in a record to always be an object similar to
344+
* components. Also accept a boolean for components.
345+
* @param record
346+
*/
347+
function normalizeRecordProps(
348+
record: RouteRecordSingleView | RouteRecordMultipleViews
349+
): Record<string, _RouteRecordProps> {
350+
const propsObject = {} as Record<string, _RouteRecordProps>
351+
const props = record.props || false
352+
if ('component' in record) {
353+
propsObject.default = props
354+
} else {
355+
// NOTE: we could also allow a function to be applied to every component.
356+
// Would need user feedback for use cases
357+
for (let name in record.components)
358+
propsObject[name] = typeof props === 'boolean' ? props : props[name]
359+
}
360+
361+
return propsObject
362+
}
363+
340364
/**
341365
* Checks if a record or any of its parent is an alias
342366
* @param record

‎src/matcher/types.ts

+5-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {
33
NavigationGuard,
44
_RouteRecordBase,
55
RouteRecordRedirectRaw,
6+
_RouteRecordProps,
67
} from '../types'
78
import { ComponentPublicInstance } from 'vue'
89

@@ -13,7 +14,10 @@ export interface RouteRecordNormalized {
1314
components: RouteRecordMultipleViews['components']
1415
children: Exclude<RouteRecordMultipleViews['children'], void>
1516
meta: Exclude<RouteRecordMultipleViews['meta'], void>
16-
props: Exclude<_RouteRecordBase['props'], void>
17+
/**
18+
* Object of props options with the same keys as `components`
19+
*/
20+
props: Record<string, _RouteRecordProps>
1721
beforeEnter: RouteRecordMultipleViews['beforeEnter']
1822
leaveGuards: NavigationGuard[]
1923
updateGuards: NavigationGuard[]

‎src/types/index.ts

+18-7
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,14 @@ export type RawRouteComponent = RouteComponent | Lazy<RouteComponent>
140140

141141
export type RouteRecordName = string | symbol
142142

143+
/**
144+
* @internal
145+
*/
146+
export type _RouteRecordProps =
147+
| boolean
148+
| Record<string, any>
149+
| ((to: RouteLocationNormalized) => Record<string, any>)
150+
143151
// TODO: could this be moved to matcher?
144152
/**
145153
* Common properties among all kind of {@link RouteRecordRaw}
@@ -160,13 +168,6 @@ export interface _RouteRecordBase extends PathParserOptions {
160168
* Name for the route record.
161169
*/
162170
name?: RouteRecordName
163-
/**
164-
* Allow passing down params as props to the component rendered by `router-view`.
165-
*/
166-
props?:
167-
| boolean
168-
| Record<string, any>
169-
| ((to: RouteLocationNormalized) => Record<string, any>)
170171
/**
171172
* Before Enter guard specific to this record. Note `beforeEnter` has no
172173
* effect if the record has a `redirect` property.
@@ -193,11 +194,21 @@ export interface RouteRecordRedirectRaw extends _RouteRecordBase {
193194
export interface RouteRecordSingleView extends _RouteRecordBase {
194195
component: RawRouteComponent
195196
children?: RouteRecordRaw[]
197+
/**
198+
* Allow passing down params as props to the component rendered by `router-view`.
199+
*/
200+
props?: _RouteRecordProps
196201
}
197202

198203
export interface RouteRecordMultipleViews extends _RouteRecordBase {
199204
components: Record<string, RawRouteComponent>
200205
children?: RouteRecordRaw[]
206+
/**
207+
* Allow passing down params as props to the component rendered by
208+
* `router-view`. Should be an object with the same keys as `components` or a
209+
* boolean to be applied to every component.
210+
*/
211+
props?: Record<string, _RouteRecordProps> | boolean
201212
}
202213

203214
export type RouteRecordRaw =

0 commit comments

Comments
 (0)