Geben Sie die Komponente in beforeEnter im Vue-Router zurück

Question

Ich habe den folgenden Pfad in meinem Router

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

Jedes Mal, wenn ich diesen Pfad eingebe, muss ich basierend auf dem Wert im Speicher eine andere Komponente zurückgeben, aber die Komponente wird nur einmal geladen. Ich habe versucht, die Struktur so umzuschreiben, dass sie beforeEnter wie folgt verwendet:

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

Aber diese Lösung funktioniert nicht. Ich muss basierend auf einer Bedingung unterschiedliche Komponenten zurückgeben, ohne unterschiedliche Pfade zu verwenden. Ist es möglich, eine Komponente in next() in beforeEnter zurückzugeben, oder gibt es eine andere Lösung, um dieses Problem zu lösen?

Answer 1

我建议使用动态组件。

一个简单的解决方案如下所示。

你的路由器

{
  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>

这是基于您的代码的更详细示例。

Vue SFC 游乐场