vue-element-admin添加自定义layout布局

添加登录页面布局

登录页面布局主要是分为顶栏容器，主要区域容器和底栏容器。

• 将UserLayout布局文件添加到layout/components中
• 在同级目录下的index.js配置UserLayoout布局

export { default as UserLayout } from ‘./UserLayout’

• 在路由配置文件中添加UserLayout布局配置，在router/index.js中引入该布局

import { UserLayout } from ‘@/layout/components’

• 在路由配置中一级路由添加component字段为UserLayout，即可使用UserLayout布局

{
    path: '/user',
    component: UserLayout,
    redirect:'/user/login',
    hidden:true,
    children: [
      {
        path:'login',
        name:'login',
        component: () => import('@/views/user/login'),
      }
    ]
  }

**注意：在UserLayout布局中，登录输入框呢一部分是需要用到route-view组件，动态引入登录输入框呢一整大部分。route-view标签需要和路由配置中的redirect重定向搭配使用。 上面路由的 path=“/login” 路径页面，直接被UserLayout.vue 的 所显示。 需要注意的是这个 标签只能显示根目录下的下一级标签，如果子路由里又存在 children 路由块需要继续增加标签 **

如下为UserLayout.vue的html部分：

<template>
  <div id="userLayout" :class="['user-layout-wrapper', device]">
    <div class="container">
      <div class="top">
        <div class="header">
        </div>
        <div class="desc">
        </div>
      </div>

      <route-view></route-view>

      <div class="footer">
        <div class="copyright">
          Copyright &copy; 2022
        </div>
      </div>
    </div>
  </div>
</template>