Vue3页面如何根据用户登录状态切换动态布局？

我有一个结果页面，登录用户与未登录用户均可访问，但两者对应的布局不同。项目基于Vue3构建，使用Vuetify、Pinia和Vue Router 4技术栈，当前router/index.ts代码如下：

/**
 * router/index.ts
 *
 * Automatic routes for `./src/pages/*.vue`
 */

// Composables
import { createRouter, createWebHistory } from 'vue-router/auto'
import { setupLayouts } from 'virtual:generated-layouts'
import { routes } from 'vue-router/auto-routes'
import { useAuthStore } from '@/stores/authStore'; 

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: setupLayouts(routes),
})

// Add a navigation guard to check authentication status
router.beforeEach((to, from, next) => {

  const authStore = useAuthStore();

  const isAuthenticated = authStore.user; 
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/authenticate'); // Redirect to login page if not authenticated
  } else {
    next();
  }
});

// Workaround for https://github.com/vitejs/vite/issues/11804
router.onError((err, to) => {
  if (err?.message?.includes?.('Failed to fetch dynamically imported module')) {
    if (!localStorage.getItem('vuetify:dynamic-reload')) {
      console.log('Reloading page to fix dynamic import error')
      localStorage.setItem('vuetify:dynamic-reload', 'true')
      location.assign(to.fullPath)
    } else {
      console.error('Dynamic import error, reloading page did not fix it', err)
    }
  } else {
    console.error(err)
  }
})

router.isReady().then(() => {
  localStorage.removeItem('vuetify:dynamic-reload')
})

export default router

已尝试过动态布局方案但未解决，以下是几种可行的解决思路：

方案一：页面组件内动态渲染不同布局 #

在结果页面组件（如ResultPage.vue）中，根据Pinia的登录状态动态切换布局组件，页面核心内容通过插槽传入布局：

<template>
  <component :is="activeLayout">
    <!-- 页面核心内容 -->
    <v-container class="pa-4">
      <h1 class="text-h4 mb-4">结果页面</h1>
      <!-- 其他业务内容 -->
    </v-container>
  </component>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useAuthStore } from '@/stores/authStore'
import AuthenticatedLayout from '@/layouts/AuthenticatedLayout.vue'
import GuestLayout from '@/layouts/GuestLayout.vue'

const authStore = useAuthStore()
const activeLayout = computed(() => authStore.user ? AuthenticatedLayout : GuestLayout)
</script>

方案二：通过路由守卫+状态监听动态修改布局 #

结合vue-router/auto的布局机制，在路由守卫和Pinia状态监听中动态修改结果页面的布局配置：

修改router/index.ts：

// ... 原有导入代码

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: setupLayouts(routes),
})

// 更新结果页面的布局配置
const updateResultPageLayout = () => {
  const authStore = useAuthStore()
  const resultRoute = router.getRoutes().find(route => route.name === 'ResultPage') // 替换为你的结果页面路由name
  if (resultRoute) {
    // 对应layouts目录下的布局文件名（不含.vue后缀）
    resultRoute.meta.layout = authStore.user ? 'Authenticated' : 'Guest'
  }
}

router.beforeEach((to, from, next) => {
  const authStore = useAuthStore()
  const isAuthenticated = authStore.user

  // 进入结果页面时更新布局
  if (to.name === 'ResultPage') {
    updateResultPageLayout()
  }

  // 原有鉴权逻辑
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/authenticate')
  } else {
    next()
  }
})

// 监听登录状态变化，实时更新布局
const authStore = useAuthStore()
authStore.$subscribe(() => {
  const currentRoute = router.currentRoute.value
  if (currentRoute.name === 'ResultPage') {
    updateResultPageLayout()
    // 触发路由重新渲染以应用新布局
    router.replace({ ...currentRoute })
  }
})

// ... 原有错误处理和isReady代码

方案三：布局组件内部根据登录状态切换结构 #

创建一个动态布局组件，内部根据登录状态渲染不同的布局结构，结果页面统一使用该布局：

创建layouts/DynamicLayout.vue：

<template>
  <v-app>
    <!-- 登录用户布局 -->
    <template v-if="isAuthenticated">
      <v-navigation-drawer permanent mini-variant>
        <!-- 侧边导航菜单 -->
        <v-list>
          <v-list-item link to="/dashboard">
            <v-list-item-icon><v-icon>mdi-home</v-icon></v-list-item-icon>
            <v-list-item-title>控制台</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-navigation-drawer>
      <v-app-bar color="primary" dark>
        <v-toolbar-title>用户后台</v-toolbar-title>
        <v-spacer></v-spacer>
        <v-btn @click="authStore.logout">退出登录</v-btn>
      </v-app-bar>
      <v-main class="pa-4">
        <slot />
      </v-main>
    </template>

    <!-- 未登录用户布局 -->
    <template v-else>
      <v-app-bar color="grey lighten-1" flat>
        <v-toolbar-title>访客页面</v-toolbar-title>
        <v-spacer></v-spacer>
        <v-btn link to="/authenticate">登录</v-btn>
      </v-app-bar>
      <v-main class="pa-4">
        <slot />
      </v-main>
    </template>
  </v-app>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useAuthStore } from '@/stores/authStore'

const authStore = useAuthStore()
const isAuthenticated = computed(() => !!authStore.user)
</script>

然后在结果页面的路由meta中指定使用DynamicLayout（即设置页面组件的<route>块为layout: Dynamic），布局会自动根据登录状态切换。

内容的提问来源于stack exchange，提问作者VV75