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
1 changed files with 5 additions and 1 deletions

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