Renvoie le composant dans beforeEnter dans vue router

Question

J'ai le chemin suivant dans mon routeur

{
                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')
                    }
                },
            },
}

Chaque fois que j'entre dans ce chemin, je dois renvoyer un composant différent en fonction de la valeur stockée, mais le composant n'est chargé qu'une seule fois. J'ai essayé de réécrire la structure pour qu'elle utilise beforeEnter comme ceci :

{
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'),
                        })
                    }
                },
}

Mais cette solution ne fonctionne pas. Je dois renvoyer différents composants en fonction d'une condition sans utiliser de chemins différents. Est-il possible de renvoyer un composant dans next() dans beforeEnter ou existe-t-il une autre solution pour résoudre ce problème ?

Answer 1

Je recommande d'utiliser Composants dynamiques.

Une solution simple est présentée ci-dessous.

Votre routeur

{
  path: '/Page',
  component: ConditionalPage
}

ConditionalPage.vue

<script setup lang="ts">
import { computed } from "vue"  
import PublicPage from "./PublicPage.vue"  
import NonPublicPage from "./NonPublicPage.vue"  

const isUserLogged = await getUser()  
const store = useStore()

const component = computed(() => {
  if (userLogged && store.value1) return PublicPage
  return NonPublicPage
})
</script>
 
<template>
  <component :is="component" />
</template>

Voici un exemple plus détaillé basé sur votre code.

Aire de jeux Vue SFC