我的路由器中有以下路径
{
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 中返回一个组件,或者是否有其他解决方案来解决此问题?
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
我建议使用动态组件。
一个简单的解决方案如下所示。
你的路由器
{ 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 游乐场