关于后台管理系统的学习:主界面

news2024/12/25 9:17:23

关于管理系统的主界面布局基本上都是下面这个格式:
在这里插入图片描述
系统中展示的所有内容都是基于这个文件(index.vue)的,通常会将主页面进行组件的拆分,比如:

<template>
    <div>
        <!-- 模块区 -->
        <layout-header v-if="modularShow" />
        <div>
            <!-- 菜单区 -->
            <layout-menu v-if="menuShow" />
            <div>
                <!-- 路由标签区 -->
                <layout-nav v-show="navigationShow" />
                <!-- 内容区 -->
                <div>
                    <router-view />
                </div>
            </div>
        </div>
    </div>
</template>

但是系统中通常会有一些特殊的页面,比如404页面,登录页面。这些页面只需要内容区,那么应该如何处理。

通常这些特殊的页面会单独写在路由文件里

export default class AppRouter {
    static getConstRoutes() {
        return [
            {
                name: '23dd949ad3432194fe9b8852572774dd',
                path: '/login',
                meta: {
                    id: '23dd949ad3432194fe9b8852572774dd',
                    name: '登录页面',
                    parentId: '',
                    dynamicLoad: true,
                    layout: {
                        modular: false, // 是否显示 模块栏
                        menu: false, // 是否显示 菜单栏
                        navigation: false, // 是否显示导航栏
                    },
                },
                component: () => import('@/usage/views/app/login/index.vue'),
                children: [],
            },
            {
                name: '1e849f8705b4b4f9872852e752f669a1c',
                path: '/404',
                meta: {
                    id: '1e849f8705b4b4f9872852e752f6691ac',
                    name: '404',
                    parentId: '',
                    dynamicLoad: true,
                    layout: {
                        modular: true, // 是否显示 模块栏
                        menu: true, // 是否显示 菜单栏
                        navigation: true, // 是否显示导航栏
                    },
                },
                component: () => import('@/usage/views/app/404/index.vue'),
                children: [],
            },
        ]
    }
}

在路由的meta中添加一些额外的信息来进行判断,当已进入主页面时通过获取meta中的layout属性来判断主界面应该显示哪些内容

setLayout(route) {
    modularShow.value = route.meta.layout?.modular || false
    menuShow.value = route.meta.layout?.menu || false
    navigationShow.value = route.meta.layout?.menu || false
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/698264.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

蓝桥杯专题-试题版-【危险系数】【网络寻路】【高僧斗法】【约数倍数选卡片】

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例点击跳转>软考全系列点击跳转>蓝桥系列 &#x1f449;关于作者 专注于Android/Unity和各种游…

【Java高级编程】IO流

IO流 1、File类的使用1.1、File类的理解1.2、File的实例化1.3、常用方法 2、IO原理及流的分类2.1、流的分类2.2、流的体系结构2.3、输入、输出的标准化过程 3、节点流&#xff08;或文件流&#xff09;3.1、FileReader的使用3.2、FileWriter的使用3.3、文本文件的复制3.4、File…

Vue3学习(一)创建项目集成ElementPlus

一、创建vue项目 软件安装&#xff1a;nodejs16 https://nodejs.org/download/release/v16.20.0/ 将npm设置为淘宝镜像&#xff1a; npm config set registry https://registry.npm.taobao.org 开始创建vue3项目 npm init vuelatest npm install npm run dev Eleement-Plus …

【python】dlib人脸识别初步

文章目录 安装与初步使用HOG算法人脸识别CNN人脸识别CNN车辆识别 安装与初步使用 dlib也是从C转过来的Python模块&#xff0c;正常安装非常痛苦&#xff0c;需要下载cmake还有boost&#xff0c;所以这里推荐用conda来安装&#xff0c;一行代码轻松搞定 conda install -c cond…

Rust简介

Rust简介 为什么要用Rust与其他语言比较Rust 特别擅长的领域Rust 与 FireFoxRust 的用户和案例![在这里插入图片描述](https://img-blog.csdnimg.cn/b1e0a39c53ba45d1a3c93d0dd73408fe.png)Rust 优缺点 ref: https://www.bilibili.com/video/BV1hp4y1k7SV 为什么要用Rust 与其…

构建便捷高效的宠物医疗预约服务平台:基于Spring Boot的实现

本文介绍了基于Spring Boot的宠物医疗预约服务平台的设计与实现。通过使用Spring Boot框架和相关技术,我们建立了一个功能丰富的平台,为宠物主人提供了便捷的宠物医疗预约服务。本文将详细介绍平台的架构设计和关键功能模块,并提供相关代码示例以展示技术实现的深度。 宠物…

内网渗透解析

1|0一、前言 阅读本文前需要先搞懂NAT、PAT、端口映射几个概念&#xff0c;内网宽带中的主机可以访问公网宽带主机&#xff0c;反之不可以访问&#xff1b;公网宽带主机可以和公网宽带主机双向访问&#xff1b;内网宽带中的主机和内网宽带中的主机互相无法访问。那么内网宽带中…

前端JavaScript入门-day05

(创作不易&#xff0c;感谢有你&#xff0c;你的支持&#xff0c;就是我前行的最大动力&#xff0c;如果看完对你有帮助&#xff0c;请留下您的足迹&#xff09; 对象 1. 对象是什么 对象&#xff08;object&#xff09;&#xff1a;JavaScript里的一种数据类型 可以理解为是一…

Elasticsearch和Kibana的安装

Elasticsearch和Lucene的关系 Elasticsearch是一个高度可扩展的、开源的、基于 Lucene 的全文搜索和分析引擎。它允许您快速&#xff0c;近实时地存储&#xff0c;搜索和分析大量数据&#xff0c;并支持多租户。 Elasticsearch也使用Java开发并使用 Lucene 作为其核心来实现所…

Docker Compose基础与实战

一、是什么 Compose 项目是 Docker 官方的开源项目&#xff0c;负责实现对 Docker 容器集群的快速编排。 二、能做什么 Compose允许用户通过一个单独的docker-compose.yml模板文件&#xff08;YAML 格式&#xff09;来定义一组相关联的应用容器为一个项目&#xff08;project&…

单链表的简介与实现(Java)

一、前言 线性结构的链式存储是用若干地址分散的存储单元存储数据元素&#xff0c;逻辑上相邻的两个数据元素在物理位置上并不一定相邻&#xff0c;必须采用附加信息来表示数据元素之间的顺序关系。因此存储一个数据元素的数据单元至少包含两部分------数据域和地址域 上述的结…

java简易计算器的设计

简易计算器的设计 1.1实训内容 模仿Windows自带的标准版计算器&#xff0c;设计并用Java语言实现简易的计算器&#xff08;根据自己的能力&#xff0c;可以适当地增加或删除部分功能&#xff09;。 最低要求&#xff1a; 计算器运行界面如下图所示&#xff0c;包含二个文本框…

Android Binder通信原理(七):java 下的C-S

源码基于&#xff1a;Android R 0. 前言 在之前的几篇博文中&#xff0c;对Android binder 的通信原理进行的深入的剖析&#xff0c;这些博文包括&#xff1a;binder 简介、servicemanager启动、service注册、service获取、Java 端的service 注册和获取。 在前一文中&#xf…

PostgreSQL处理JSON数据

源&#xff1a;https://blog.csdn.net/c_zyer/article/details/130968257?ops_request_misc&request_id&biz_id102&utm_termPostgreSQL%20%E7%9A%84JSON%20%E5%A4%84%E7%90%86&utm_mediumdistribute.pc_search_result.none-task-blog-2allsobaiduweb~default-…

pgsql:纵列字段转为横列字段

问题&#xff1a; 想要将查询出来的数据纵列字段转为横列字段。如以下是24小时内每个小时的数据表&#xff1a; SELECT deviceid,press_avg, hh FROM site_data 想要转换后的效果如下&#xff0c;将24小时内所有数据横向展示&#xff1a; 解决方案&#xff1a; 实现的sql查询…

Spring事务的介绍和使用

目录 一、Spring事务作用 二、代码实现 三、Spring事务相关配置 1、事务配置 2、事务传播行为 一、Spring事务作用 事务作用&#xff1a;在数据层保障一系列的数据库操作同成功同失败 Spring事务作用&#xff1a;在数据层或业务层保障一系列的数据库操作同成功同失败 二、…

分散输入和集中输出(Scatter-Gather I/O):readv()和writev()

readv()和writev()系统调用分别实现了分散输入和集中输出的功能。 NAMEreadv, writev, preadv, pwritev - read or write data into multiple buffersSYNOPSIS#include <sys/uio.h>ssize_t readv(int fd, const struct iovec *iov, int iovcnt);ssize_t writev(int fd, c…

蓝桥杯专题-试题版-【数字游戏】【城市建设】【最大子阵】【蚂蚁感冒】

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例点击跳转>软考全系列点击跳转>蓝桥系列 &#x1f449;关于作者 专注于Android/Unity和各种游…

数字人解决方案——基于真人视频的三维重建数字人源码与训练方法

前言 1.真人视频三维重建数字人源码是基于NeRF改进的RAD-NeRF&#xff0c;NeRF&#xff08;Neural Radiance Fields&#xff09;是最早在2020年ECCV会议上的Best Paper&#xff0c;其将隐式表达推上了一个新的高度&#xff0c;仅用 2D 的 posed images 作为监督&#xff0c;即…

MongoDB存储引擎

1、前言 存储引擎是数据库的组成部分&#xff0c;负责管理数据存储。 MongoDB支持的以下存储引擎&#xff1a; 存储引擎 描述 WiredTiger存储引擎 从MongoDB 3.2开始默认的存储引擎&#xff0c;新的版本MongoDB推荐使用WiredTiger存储引擎。 MMAPv1存储引擎 MMAPv1是Mon…