前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >《vue3+ts+element-plus 后端管理系统系列二》之布局

《vue3+ts+element-plus 后端管理系统系列二》之布局

作者头像
星宇大前端
发布2021-02-04 10:00:24
3.1K0
发布2021-02-04 10:00:24
举报
文章被收录于专栏:大宇笔记

布局

本页面部分内容来源于引用vue-element-admin-site

页面整体布局是一个产品最外层的框架结构,往往会包含导航、侧边栏、面包屑以及内容等。想要了解一个后台项目,先要了解它的基础布局。

layout构成:

  • 导航
  • 侧边栏
  • 面包屑
  • AppMain

Layout

在这里插入图片描述
在这里插入图片描述

@/layout

vue3-composition-admin 中大部分页面都是基于这个 layout 的,除了个别页面如:login , 404, 401 等页面没有使用该layout。如果你想在一个项目中有多种不同的layout也是很方便的,只要在一级路由那里选择不同的layout组件就行。

代码语言:javascript
复制
// 不含 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 中的内容(侧边栏或者导航栏)都是不会随着你主体页面变化而变化的。

代码语言:javascript
复制
/foo                                  /bar
+------------------+                  +-----------------+
| layout           |                  | layout          |
| +--------------+ |                  | +-------------+ |
| | foo.vue      | |  +------------>  | | bar.vue     | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

当然你也可以一个项目里面使用多个不同的 layout,只要在你想作用的路由父级上引用它就可以了。

app-main

@/layout/components/AppMain

这里在 app-main 外部包了一层 keep-alive 主要是为了缓存 <router-view> 的,配合页面的 tabs-view 标签导航使用,如不需要可自行去除

其中transition 定义了页面之间切换动画,可以根据自己的需求,自行修改转场动画。相关文档

router-view

不同的 router 有时会对应着相同的 component, 在真实的业务场景中,这种情况很多。比如:

在这里插入图片描述
在这里插入图片描述

创建编辑 的页面使用的是同一个 component,默认情况下这两个页面切换时并不会触发 vue 的 created 或者 mounted 钩子,官方文档说你可以通过 watch $route 的变化来进行处理,但说真的还是蛮麻烦的。后来发现其实可以简单的在 router-view 上加上一个唯一的 key,来保证路由切换时都会重新渲染触发钩子了,这样简单多了。

代码语言:javascript
复制
<router-view :key="key" />
代码语言:javascript
复制
get key() {
  // 只要保证 key 唯一性就可以了,保证不同页面的 key 不相同
  return this.$route.path
}

项目例子:

或者可以像本项目中 editFormcreateForm 那样声明两个不同的 view 但引入同一个 component。

代码:@/views/example

代码语言:javascript
复制
<!-- 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 做了一点简单的响应式布局,如果要求过高需要重复做一套。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021/01/30 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 布局
    • Layout
      • app-main
        • router-view
          • 移动端
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档