vue router中beforeEnter中返回组件-PHP中文网问答

我的路由器中有以下路径

{
                path: '/Page',
                component: async () => {
                    const isUserLogged = await getUser()
                    const store = useStore()
                    if (userLogged && store.value1) {
                        return import('./pages/PublicPage/PublicPage.vue')
                    } else {
                        return import('./pages/NonPublicPage/NonPublicPage.vue')
                    }
                },
            },
}

每次进入此路径时，我都需要根据存储中的值返回不同的组件，但该组件仅加载一次。我尝试重写结构，使其使用 beforeEnter，如下所示：

{
path: '/Page',
beforeEnter: async (to, from, next) => {
                    const isUserLogged = await getUser()
                    const store = useStore()
                    if (userLogged && store.value1) {
                            next({
                                component: () => import('./pages/PublicPage/PublicPage.vue'),
                            })
                    } else {
                        next({
                            component: () => import('./pages/NonPublicPage/NonPublicPage.vue'),
                        })
                    }
                },
}

但是这个解决方案不起作用。在不使用不同路径的情况下，我需要根据条件返回不同的组件。是否可以在 next() 中的 beforeEnter 中返回一个组件，或者是否有其他解决方案来解决此问题？