Zengtudor
/
Nuxt
mirror of https://github.com/nuxt/nuxt.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(nuxt): make route provided to page children reactive (#6349)

This commit is contained in:
Daniel Roe 2022-08-04 12:30:18 +01:00 committed by GitHub
parent 23329e0599
commit 1f00a9f011
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 18 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/nuxt/src/pages/runtime/page.ts
View File

@ -1,4 +1,4 @@
import { DefineComponent, defineComponent, h, inject, provide, Suspense, Transition } from 'vue'
import { computed, DefineComponent, defineComponent, h, inject, provide, reactive, Suspense, Transition } from 'vue'
import { RouteLocationNormalized, RouteLocationNormalizedLoaded, RouterView } from 'vue-router'
import { generateRouteKey, RouterViewSlotProps, wrapInKeepAlive } from './utils'
@ -33,14 +33,16 @@ export default defineComponent({
default: (routeProps: RouterViewSlotProps) => {
if (!routeProps.Component) { return }
const key = generateRouteKey(props.pageKey, routeProps)
return _wrapIf(Transition, routeProps.route.meta.pageTransition ?? defaultPageTransition,
wrapInKeepAlive(routeProps.route.meta.keepalive, isNested && nuxtApp.isHydrating
// Include route children in parent suspense
? h(Component, { key: generateRouteKey(props.pageKey, routeProps), routeProps } as {})
? h(Component, { key, routeProps, pageKey: key } as {})
: h(Suspense, {
onPending: () => nuxtApp.callHook('page:start', routeProps.Component),
onResolve: () => nuxtApp.callHook('page:finish', routeProps.Component)
}, { default: () => h(Component, { key: generateRouteKey(props.pageKey, routeProps), routeProps } as {}) })
}, { default: () => h(Component, { key, routeProps, pageKey: key } as {}) })
)).default()
}
})
@ -56,9 +58,20 @@ export default defineComponent({
const defaultPageTransition = { name: 'page', mode: 'out-in' }
const Component = defineComponent({
props: ['routeProps'],
// eslint-disable-next-line vue/require-prop-types
props: ['routeProps', 'pageKey'],
setup (props) {
provide('_route', props.routeProps.route)
// Prevent reactivity when the page will be rerendered in a different suspense fork
const previousKey = props.pageKey
const previousRoute = props.routeProps.route
// Provide a reactive route within the page
const route = {}
for (const key in props.routeProps.route) {
route[key] = computed(() => previousKey === props.pageKey ? props.routeProps.route[key] : previousRoute[key])
}
provide('_route', reactive(route))
return () => h(props.routeProps.Component)
}
})