如何仅在路径为'admin/***'的管理后台页面中引入Vuetify？

可以实现该需求，无需全局引入Vuetify，以下是两种常用实现方案：

方案1：路由守卫动态注册（推荐） #

• 第一步：移除项目中原有的Vuetify全局注册代码，避免全量加载
• 第二步：给所有/admin前缀的路由统一增加meta标识，示例路由配置如下：

const routes = [
  // 普通页面路由，无需加载Vuetify
  {
    path: '/',
    component: () => import('@/views/Home.vue')
  },
  // admin分组路由
  {
    path: '/admin',
    meta: { requireVuetify: true },
    children: [
      // 所有admin相关子路由
      { path: 'dashboard', component: () => import('@/views/admin/Dashboard.vue') }
    ]
  }
]

• 第三步：在全局路由前置守卫中判断路由标识，按需动态注册Vuetify：

// 缓存Vuetify实例，避免重复注册
let vuetifyIns = null

router.beforeEach(async (to, from, next) => {
  // 判断当前路由是否属于admin分组
  const isAdminRoute = to.matched.some(item => item.meta.requireVuetify)
  if (isAdminRoute && !vuetifyIns) {
    // 动态引入Vuetify核心包和样式
    const { createVuetify } = await import('vuetify')
    await import('vuetify/styles')
    // 初始化实例并挂载到Vue应用
    vuetifyIns = createVuetify({
      // 填入你的Vuetify自定义配置
      theme: { defaultTheme: 'light' }
    })
    app.use(vuetifyIns)
  }
  next()
})

方案2：Admin布局组件内部注册 #

如果你的admin页面都统一嵌套在同一个父布局组件下，可以直接在布局组件的生命周期中注册Vuetify：

// AdminLayout.vue
import { ref, onBeforeMount, getCurrentInstance } from 'vue'
const isVuetifyLoaded = ref(false)

onBeforeMount(async () => {
  if (window.__vuetifyLoaded) return
  const { createVuetify } = await import('vuetify')
  import('vuetify/styles')
  const vuetifyIns = createVuetify({ /* 配置项 */ })
  getCurrentInstance().appContext.app.use(vuetifyIns)
  window.__vuetifyLoaded = true
  isVuetifyLoaded.value = true
})

注意事项 #

• 必须添加实例缓存逻辑，避免路由切换时重复注册Vuetify导致样式冲突、组件报错
• 如果出现非admin页面和admin页面切换时样式污染，可以给Vuetify配置prefix选项，给所有Vuetify类名增加自定义前缀隔离样式

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