《vue3+ts+element-plus后台管理系统系列⼆》之布局
布局
本页⾯部分内容来源于引⽤
页⾯整体布局是⼀个产品最外层的框架结构，往往会包含导航、侧边栏、⾯包屑以及内容等。想要了解⼀个后台项⽬，先要了解它的基础布局。
layout构成：
导航
侧边栏
⾯包屑
AppMain
Layout
vue3-composition-admin 中⼤部分页⾯都是基于这个 layout 的，除了个别页⾯如：login , 404, 401 等页⾯没有使⽤该layout。如果你想在⼀个项⽬中有多种不同的layout也是很⽅便的，只要在⼀级路由那⾥选择不同的layout组件就⾏。
// 不含 layout
{
path:'/401',
component:()=>import('@/views/error-page/401.vue')
}
// 含有 layout
{
path:'/documentation',
// 你可以选择不同的layout组件
component: Layout,
// 这⾥开始对应的路由都会显⽰在 app-main 中，如上图所⽰
children:[{
path:'index',
component:()=>import('@views/documentation/index.vue'),
name:'documentation'
}]
}
这⾥使⽤了 vue-router , 所以⼀般情况下，你增加或者修改页⾯只会影响 app-main这个主体区域。其它配置在 layout 中的内容(侧边栏或者导航栏)都是不会随着你主体页⾯变化⽽变化的。
/foo                                  /bar
+------------------+                  +-----------------+
vue element admin
| layout          |                  | layout          |
| +--------------+ |                  | +-------------+ |
| | foo.vue      | |  +------------>  | | bar.vue    | |
| |              | |                  | |            | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+
当然你也可以⼀个项⽬⾥⾯使⽤多个不同的 layout，只要在你想作⽤的路由⽗级上引⽤它就可以了。
app-main
这⾥在 app-main 外部包了⼀层 keep-alive 主要是为了缓存 <router-view> 的，配合页⾯的 tabs-view 标签导航使⽤，如不需要可⾃⾏。
其中transition 定义了页⾯之间切换动画，可以根据⾃⼰的需求，⾃⾏修改转场动画。相关
router-view
不同的 router 有时会对应着相同的 component, 在真实的业务场景中，这种情况很多。⽐如：
创建 和 编辑 的页⾯使⽤的是同⼀个 component，默认情况下这两个页⾯切换时并不会触发 vue 的 created 或者 mounted 钩⼦，你可以通过 watch $route 的变化来进⾏处理，但说真的还是蛮⿇烦的。后来发现其实可以简单的在 router-view 上加上⼀个唯⼀的 key，来保证路由切换时都会重新渲染触发钩⼦了，这样简单多了。
<router-view :key="key"/>
get key(){
// 只要保证 key 唯⼀性就可以了，保证不同页⾯的 key 不相同
return this.$route.path
}
项⽬例⼦：
或者可以像本项⽬中 editForm 和 createForm 那样声明两个不同的 view 但引⼊同⼀个 component。
代码：
<!-- create.vue -->
<template>
<article-detail :is-edit="false"/>
</template>
<script lang="ts">
import ArticleDetail from'./components/ArticleDetail.vue'
</script>
<!-- edit.vue -->
<template>
<article-detail :is-edit="true"/>
</template>
<script lang="ts">
import ArticleDetail from'./components/ArticleDetail.vue'
</script>
移动端
element-plus 官⽅对⾃⼰的定位是桌⾯端后台框架，⽽且对于管理后台这种重交互的项⽬来说是不能通过简单的适配来满⾜桌⾯端和移动端两端不同的交互，所以真要做移动版后台，建议重新做⼀套系统。
所以本项⽬也不会适配移动端，只是⽤ media query 做了⼀点简单的响应式布局，如果要求过⾼需要重复做⼀套。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。