不正经的前端项目多布局思路
你想要的多布局是哪种？
我们平常所说的多布局比较笼统，仔细分来其实有两种需要多布局的场景，大家可以自行匹配一下：
- 项目有很多页面，有些页面是一样的布局，但还有些页面是另外一种布局，所以我们需要多种布局提供给不同的页面。
- 项目有很多页面，页面都是统一的布局，但是我们需要提供多种可以自由切换的布局，让用户在生产环境自己去选择。
多页面不同布局
如果你只是需要在不同的页面使用不同的布局，那么很简单。
因为你只需要写多个不同的布局组件，然后使用二级路由通过指定父级路由的 component 就可以决定采用哪个布局，如下：
假如我们有 2 个布局：
jsx
// layout 1
Layout1.vue
// layout 2
Layout2.vue
页面 page_a 想要使用 Layout1 布局，页面 page_b 想要使用 Layout2 布局，那么只需在配置路由时如下：
jsx
{
routes: [
{
path: '/layout1',
name: 'Layout1',
component: () => import('***/Layout1.vue'),
redirect: '/layout1/page_a',
children: [
{
path: 'page_a',
name: 'PageA',
component: () => import('***/PageA.vue')
},
// ...
]
},
{
path: '/layout2',
name: 'Layout2',
component: () => import('***/Layout2.vue'),
redirect: '/layout2/page_b',
children: [
{
path: 'page_b',
name: 'PageB',
component: () => import('***/PageB.vue')
},
// ...
]
}
]
}
如上所示，我们只需要在根组件和布局组件中写上 <router-view /> 就 OK 了！
可动态切换的布局
再来看可以动态切换的布局，其实也很简单，一般来说，我们使用 Vue 的 component 组件，通过 is 属性去动态的渲染布局组件就可以了，如下：
html
<!-- SwitchLayout.vue -->
<script setup>
const isOneLayout = ref(true)
import Layout1 from "./Layout1.vue"
import Layout2 from "./Layout2.vue"
</script>
<template>
<button @click="isOneLayout = !isOneLayout" />
<component :is="isOneLayout ? Layout1 : Layout2" />
</template>
然后，我们直接在父路由中引入此页面，就可以通过改变状态来动态切换所有的子路由布局了，如下：
jsx
{
routes: [
{
path: '/',
component: () => import('***/SwitchLayout.vue'),
redirect: '/page_a',
children: [
{
path: 'page_a',
name: 'PageA',
component: () => import('***/PageA.vue')
},
// ...
]
},
}
PS： Vue 内置的 component 组件在 Vue2 中 is 也可以通过组件名称切换， Vue3 中只能通过组件实例切换！