Vue 项目中如何重构“布局”（）

【Vue 项目中如何重构“布局”（）】亦余心之所善兮，虽九死其犹未悔。这篇文章主要讲述Vue 项目中如何重构“布局”？相关的知识，希望能为你提供帮助。
正视布局开篇想先问你一个问题：

“你认为你目前所在 Vue 项目中的 layouts 设置有什么问题吗？”

文章图片

你可能会回答：

“没有啥问题啊。因为不就是简单的在外层套一个 Layout 组件吗？”

我想一定类似这样吧：

< template>
< MyLayout>
< h1> Here is my page content< /h1>
< /MyLayout>
< /template>

< script>
import MyLayout from @/layouts/MyLayout.vue
export default
name: MyPage,
components:MyLayout

< /script>

或者这样，以本瓜所在项目举例，Layout 设置：

如果你用过 vue-element-admin 一定很熟悉这样的路由设置（业务组件是 Layout 组件的子组件）

const AdminLayout = () => import(@/views/admin/homepage/layout.vue)
const OrgList = () => import(@/views/admin/admOrg/orgList.vue)
const OrgDetail = () => import(@/views/admin/admOrg/orgDetail.vue)

export const admOrgRouters =
path: /orgManage,
component: AdminLayout,
redirect: /orgList,
name: 组织管理,
iconClass: orgManage,
children: [
orgList,
orgDetail,
],
meta:
roles: [isAdmin, ordinaryAdmin],
title: 组织管理