javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 03:00:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(vue): pass in correct route to props function (#22605)

Browse Source 
resolves #22602
This commit is contained in:
Liam DeBeasi
2020-12-07 10:33:22 -05:00
committed by GitHub
parent 36939e10ae
commit 01afdc42e5
4 changed files with 69 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
packages/vue/src/components/IonRouterOutlet.ts
View File

@ -11,13 +11,14 @@ import {
onUnmounted
} from 'vue';
import { AnimationBuilder, LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE } from '@ionic/core';
import { matchedRouteKey, useRoute } from 'vue-router';
import { matchedRouteKey, routeLocationKey, useRoute } from 'vue-router';
import { fireLifecycle, generateId, getConfig } from '../utils';
let viewDepthKey: InjectionKey<0> = Symbol(0);
export const IonRouterOutlet = defineComponent({
name: 'IonRouterOutlet',
setup(_, { attrs }) {
const injectedRoute = inject(routeLocationKey)!;
const route = useRoute();
const depth = inject(viewDepthKey, 0);
const matchedRouteRef: any = computed(() => {
@ -352,12 +353,13 @@ export const IonRouterOutlet = defineComponent({
return {
id,
components,
injectedRoute,
ionRouterOutlet,
registerIonPage
}
},
render() {
const { components, registerIonPage } = this;
const { components, registerIonPage, injectedRoute } = this;
return h(
'ion-router-outlet',
@ -374,22 +376,43 @@ export const IonRouterOutlet = defineComponent({
/**
* IonRouterOutlet does not support named outlets.
*/
if (c.matchedRoute?.props?.default) {
const matchedRoute = c.matchedRoute;
const routePropsOption = matchedRoute.props.default;
const routeProps = routePropsOption
? routePropsOption === true
? c.params
: typeof routePropsOption === 'function'
? routePropsOption(matchedRoute)
: routePropsOption
: null
const routePropsOption = c.matchedRoute?.props?.default;
props = {
...props,
...routeProps
/**
* Since IonRouterOutlet renders multiple components,
* each render will cause all props functions to be
* called again. As a result, we need to cache the function
* result and provide it on each render so that the props
* are not lost when navigating from and back to a page.
* When a component is destroyed and re-created, the
* function is called again.
*/
const getPropsFunctionResult = () => {
const cachedPropsResult = c.vueComponentData?.propsFunctionResult;
if (cachedPropsResult) {
return cachedPropsResult;
} else {
const propsFunctionResult = routePropsOption(injectedRoute);
c.vueComponentData = {
...c.vueComponentData,
propsFunctionResult
};
return propsFunctionResult;
}
}
const routeProps = routePropsOption
? routePropsOption === true
? c.params
: typeof routePropsOption === 'function'
? getPropsFunctionResult()
: routePropsOption
: null
props = {
...props,
...routeProps
}
return h(
c.vueComponent,
props