在我的应用程序中,我有多个布局。它们被分开放在不同的文件夹中。我想为布局使用不同的 SCSS 文件。然而,无论使用什么布局(基于路由器元上的 Prop ),所有 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 ...
]
}
]
aynone 能帮我个忙吗?
最佳答案
如果应用程序是使用 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 动态导入已经用于路由器中的 View 组件。
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>
关于javascript - 多个布局,多个 CSS,一次只有一个,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68490076/