如何在 Vuetify 3 应用程序中利用多种布局

Question

当我使用 npm 创建基本的 vuetify 应用程序时，我会加载包含 default.vue 及其组件的布局文件夹。

然后在路由器中我有以下内容：

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

// Composables
import { createRouter, createWebHistory } from 'vue-router/auto'
import { setupLayouts } from 'virtual:generated-layouts'

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  extendRoutes: setupLayouts,
})

此extendedRoutes属性加载默认布局。但是，我有多种布局（一种用于登录屏幕，一种用于我的仪表板）。目前尚不清楚如何利用多种布局。当我通过 npm 创建 primevue 应用程序时，我能够按如下方式使用路由器并为我的子路由定义布局：

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: () => import('../views/LoginView.vue'),
      meta: {
        requiresAuth: false,
      },
    },
    {
      path: '/',
      component: () => import('../layouts/DashboardLayout.vue'),
      meta: {
        requiresAuth: false,
      },
      children: [
        {
          path: '/',
          name: 'Dashboard',
          component: () => import('../views/HomeView.vue'),
        },
        {
          path: '/upload',
          name: 'Upload Review',
          component: () => import('../views/HomeView.vue'),
        },
        {
          path: '/files',
          name: 'Files',
          component: () => import('../views/HomeView.vue'),
        },
        {
          path: '/support',
          name: 'Support',
          component: () => import('../views/HomeView.vue'),
        },
        {
          path: '/settings',
          name: 'Settings',
          component: () => import('../views/HomeView.vue'),
        },
        {
          path: '/management/test-review',
          name: 'Management Test Review',
          component: () => import('../views/HomeView.vue'),
        },
        {
          path: '/management/type-review',
          name: 'Management type Review',
          component: () => import('../views/HomeView.vue'),
        },
      ],
    },
    // default redirect to home page
    { path: '/:pathMatch(.*)*', redirect: '/login' }
  ]
})

目前还不清楚为什么这种类似的方法不适用于 vuetify。我的 DashboardLayout.vue 包含以下内容：

<template>
  <v-app>
    <v-layout>
      <SideNavBar/>
      <TopNavBar/>
      <View/>
    </v-layout>
  </v-app>
</template>
<script lang="ts">
  import SideNavBar from './dashboard/SideNavBar.vue'
  import TopNavBar from './dashboard/TopNavBar.vue'
  import View from './dashboard/View.vue'
</script>

View组件包含router-view。所以我不确定这里的问题是什么。就好像 vuetify 正在为 vue 路由器和布局做其他事情。

Answer 1

我今天刚遇到这个。在 Vuetify 文档中搜索，我找到了正在使用的模块的链接：https://github.com/JohnCampionJr/vite-plugin-vue-layouts

在浏览that文档时，我们发现要设置给定页面的布局，您需要添加以下内容：

<template><div>Content</div></template>
<route lang="yaml">
meta:
  layout: default
</route>

参见：https://github.com/JohnCampionJr/vite-plugin-vue-layouts?tab=readme-ov-file#set-static-data-at-the-page