vue router中beforeEnter中返回元件

Question

我的路由器中有以下路徑

{
                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 中傳回一個元件，或者有其他解決方案來解決此問題？

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 遊樂場