Vue 魔法师 —— 重构“布局”

2022-09-22 12:16:21 浏览数 (2)

title: Vue 魔法师 —— layouts date: 2021-03-17 tags:

  • vue categories:
  • 2021

正视布局

开篇想先问你一个问题：

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

你可能会回答：

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

我想一定类似这样吧：

代码语言：javascript复制
<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: '组织管理' } }

代码语言：javascript复制
nice！如果你的项目也类似这样的话，就可以继续看后文了~（不然就点赞


	


html vue.js 




	






	

 0 人点赞