多个布局，多个 CSS，一次只有一个

Question

在我的应用程序中，我有多个布局。它们被分隔在不同的文件夹中。我想为布局使用不同的 SCSS 文件。然而，无论使用什么布局（基于路由器元上的道具），所有 SCSS 文件都会被导入。这会弄乱布局，因为样式混合在一起。有没有办法只导入与使用布局相关的 SCSS？

App.vue

<template>

    <component :is="layout" />

</template>

<script>
import DefaultLayout from '@/layouts/default/DefaultLayout';
import PrimaryLayout from '@/layouts/primary/PrimaryLayout';
import SecondaryLayout from '@/layouts/secondary/SecondaryLayout';

export default {
    components: {
        DefaultLayout,
        PrimaryLayout,
        SecondaryLayout
    },
    data() {
        return {
            layout: null
        }
    },
    watch: {

        $route(to, from) {

            document.title = to.meta.title;

            this.layout = to.meta.layout || 'DefaultLayout';

        }

    }
};
</script>

src/layouts/primary/PrimaryLayout.vue

<template>
     Html content here
     <router-view />
</template>

<script>
export default {
    name: 'PrimaryLayout'
}
</script>

<style lang="scss">
@import '@/assets/layouts/primary/scss/main.scss';
</style>

src/layouts/secondary/SecondaryLayout.vue

<template>
     Different html content here
     <router-view />
</template>

<script>
export default {
    name: 'SecondaryLayout'
}
</script>

<style lang="scss">
@import '@/assets/layouts/secondary/scss/main.scss';
</style>

src/router/index.js

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
     {
        path: '/login',
        name: 'Login',
        component: () => import('@/pages/auth/Login.vue'),
        meta: {
            layout: 'PrimaryLayout',
            title: 'Auth Page'
        }
    },
    {
        path: '/admin',
        name: 'Admin',
        component: () => import('@/pages/admin/Admin.vue'),
        children: [
             {
                 path: '',
                 name: 'Dashboard',
                 component: () => import('@/pages/admin/Dashboard.vue'),
                 meta: {
                     layout: 'SecondaryLayout',
                     title: 'Admin | Home'
                 },
             },
             ... other pages ...
        ]
    }
]

谁能帮帮我？

Answer 1

如果应用程序是使用 Vue CLI 生成并在后台使用 Webpack，我们可以通过切换到动态导入来依赖 Webpack 的代码拆分功能：

所以不是

<script>
import DefaultLayout from '@/layouts/default/DefaultLayout';
import PrimaryLayout from '@/layouts/primary/PrimaryLayout';
import SecondaryLayout from '@/layouts/secondary/SecondaryLayout';

export default {
    components: {
        DefaultLayout,
        PrimaryLayout,
        SecondaryLayout
    },
    ...
};
</script>

我们像这样导入布局组件：

<script>
export default {
    components: {
        DefaultLayout: () => import('@/layouts/default/DefaultLayout'),
        PrimaryLayout: () => import('@/layouts/primary/PrimaryLayout'),
        SecondaryLayout: () => import('@/layouts/secondary/SecondaryLayout')
    },
    ...
};
</script> 

这应该指示 Webpack 和 Vue Loader 将这些组件的代码放入单独的包中，并且只加载当前需要的那些。

小心！

从布局 A 的路线导航到布局 B 的路线的用户最终会同时加载和应用两种布局的样式。为了保证真正的隔离，最好使用scoped 或module 样式。

另类

另一种（我认为更好的）将布局分配给不同页面的方法是使用插槽。

这将产生更简洁的代码，因为不需要为路由声明元属性并在 App.vue 中观察它们。在给定的情况下，代码拆分也适用于 OOTB，因为 webpack 动态导入已经用于路由器中的视图组件。

App.vue

<template>
  <router-view></router-view>
</template>

PrimaryLayout.vue

<template>
    ... Layout-specific HTML here
    <slot></slot>
    ... more layout-specific HTML
</template>

登录.vue

<template>
  <PrimaryLayout>
    ... Login.vue component template goes here
  </PrimaryLayout>
</template>

<script>
import PrimaryLayout from '@/layouts/primary/PrimaryLayout';

export default {
  components: { PrimaryLayout }
}
</script>