Kembalikan komponen sebelumMasukkan dalam penghala vue

Question

Saya mempunyai laluan berikut dalam penghala saya

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

Setiap kali saya memasuki laluan ini, saya perlu mengembalikan komponen yang berbeza berdasarkan nilai dalam storan, tetapi komponen tersebut hanya dimuatkan sekali. Saya cuba menulis semula struktur supaya ia menggunakan beforeEnter seperti ini:

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

Tetapi penyelesaian ini tidak berkesan. Saya perlu mengembalikan komponen yang berbeza berdasarkan syarat tanpa menggunakan laluan yang berbeza. Adakah mungkin untuk mengembalikan komponen dalam next() dalam beforeEnter atau adakah terdapat penyelesaian lain untuk menyelesaikan masalah ini?

Answer 1

Saya mengesyorkan menggunakan Komponen Dinamik.

Penyelesaian mudah ditunjukkan di bawah.

Penghala anda

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

Berikut ialah contoh yang lebih terperinci berdasarkan kod anda.

Taman Permainan Vue SFC