fix(nuxt): assign route without reactivity afterEach

This commit is contained in:
julien huang 2023-12-10 21:01:24 +01:00
parent caef295215
commit eb2d305e76

View File

@ -1,4 +1,4 @@
import { isReadonly, reactive, shallowReactive, shallowRef } from 'vue' import { isReadonly, reactive, shallowReactive, shallowRef, toValue } from 'vue'
import type { Ref } from 'vue' import type { Ref } from 'vue'
import type { RouteLocation, Router, RouterScrollBehavior } from '#vue-router' import type { RouteLocation, Router, RouterScrollBehavior } from '#vue-router'
import { import {
@ -99,11 +99,15 @@ const plugin: Plugin<{ router: Router }> = defineNuxtPlugin({
const _route = shallowRef(router.resolve(initialURL) as RouteLocation) const _route = shallowRef(router.resolve(initialURL) as RouteLocation)
const syncCurrentRoute = () => { _route.value = router.currentRoute.value } const syncCurrentRoute = () => { _route.value = router.currentRoute.value }
nuxtApp.hook('page:finish', syncCurrentRoute) nuxtApp.hook('page:finish', syncCurrentRoute)
router.afterEach((to, from) => { router.afterEach((to, from) => {
// We won't trigger suspense if the component is reused between routes // We won't trigger suspense if the component is reused between routes
// so we need to update the route manually // so we need to update the route manually
if (to.matched[0]?.components?.default === from.matched[0]?.components?.default) { if (to.matched[0]?.components?.default === from.matched[0]?.components?.default) {
syncCurrentRoute() syncCurrentRoute()
} else {
// assign toValue to avoid reactivity
Object.assign(toValue(_route), router.currentRoute.value)
} }
}) })