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 游乐场