关于管理系统的主界面布局基本上都是下面这个格式：

系统中展示的所有内容都是基于这个文件(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
}