Vue 3 показывает предыдущий маршрут в onMounted ⇐ Javascript

[Гость]

Я использую Vue с динамической навигацией, основанной на моем бэкэнде. Конечная точка решает, какую страницу отображать, исходя из текущего маршрута.

Ниже я сделал упрощенную версию с соответствующими частями. Все работает нормально, за исключением случаев, когда я использую или router.push для одного из моих маршрутов. В обратном вызове onMounted моей целевой страницы маршрут выглядит как предыдущий маршрут (см. AboutView.vue ниже).

Я пробовал await router.isReady(), но, насколько я могу судить, это здесь не актуально, оно используется только для начального просмотра страницы.

Пример репозитория, созданного с использованием узла 16.13.2: https://github.com/tietoevry-johan/vue-routing

App.vue

router.ts

export const currentPage = ref('HomeView') const router = createRouter({ история: createWebHistory(import.meta.env.BASE_URL), маршруты: [ { имя: "Селектор страниц", путь: "/:catchAll(.*)", компонент: PageSelector } ] }); router.beforeEach(async (to, _, next) => { currentPage.value = ожидайте getComponentByPath(to.path) следующий() }) асинхронная функция getComponentByPath (путь: строка) { обратный путь === '/' ? «HomeView»: «О представлении» } PageSelector.vue

импортировать { defineComponent } из "vue" импортировать AboutView из "@/views/AboutView.vue" импортировать HomeView из "@/views/HomeView.vue" импортировать { currentPage } из "@/router" экспортировать по умолчанию defineComponent({ // eslint-disable-next-line vue/no-unused-composes компоненты: { HomeView, AboutView }, настраивать() { возвращаться { текущая страница } } }) О ViewView.vue
о импортировать маршрутизатор из "@/router"; импортировать {defineComponent, onMounted} из "vue"; экспортировать по умолчанию defineComponent({ настраивать() { onMounted(() => { console.log(router.currentRoute.value?.fullPath) // печатает / вместо /about // при нажатии на ссылку маршрутизатора или переходе маршрутизатора на эту страницу }) } })