共计 598 个字符，预计需要花费 2 分钟才能阅读完成。
问题形容
咱们做我的项目中，最罕用的布局形式就是右边导航区域，左边视图层动态变化区域（有时会来一个顶栏，放面包屑和用户头像局部）。当用户点击右边的导航区域，对应左边的视图区域会动静切换。然而如同无形中会给咱们造成一个错觉，就是视图区域层并不是全屏幕，如同视图就是全屏幕去掉左侧导航栏和顶部面包屑用户头像局部的，残余局部。如下图所示：
然而，如果遇到大场景，须要满屏展现内容，如同咱们只能做一个折叠成果，给顶栏加一个图标按钮，点击图标按钮，折叠左侧的导航栏。确实这样做空间又会大一些，然而产品经理就是想要满屏的成果。怎么办？
实现形式
形式一 满屏弹窗（障眼法）
在对应须要展现的路由页面，再加一个大的弹窗，这个弹窗固定定位，就会绝对于视口了，当然须要加上 top:0;left:0;width:100%;height:100%; 这样的话就会满屏了，然而这样做存在潜在的问题。就是因为是用一个大的满屏弹窗，理论路由页面并没有变动，当用户点击浏览器的回退按钮，就会回退到 ” 上上个路由界面 ”，当然也并不影响应用。不过还有一个问题就是咱们会在满屏幕的大弹窗中去接着写代码，就会让代码全副都耦合在一个.vue 文件中，不不便代码的保护。这里能够采取形式二
形式二 路由视图层满屏
代码截图
成果截图
总结
如果产品经理要求应用满屏成果，上述两种形式均能够应用。就是开启固定定位布局即可。然而形式二，通过视图层满屏会更好些
优先举荐形式二
正文完