问题描述在我们的项目中，最常用的布局方式是左侧导航区和右侧视图层动态变化区域（有时会有一个顶部栏，放置面包屑和用户头像部分）。当用户点击左侧导航区时，右侧对应的视图区会动态切换。但是好像无形中会给我们一种错觉，就是视图区域层不是全屏的，好像视图是全屏的，没有左侧导航栏和顶部面包屑用户头像等等。如下图：但是，如果遇到大场景，需要全屏显示内容，貌似只能做一个折叠效果，在顶栏添加一个图标按钮，点击图标按钮,并折叠左侧导航栏。确实这样空间会大一些，但是产品经理只是想要全面屏的效果。该怎么办？实现方式一个全屏弹窗（隐蔽法）对应需要显示的路由页面，加上一个大弹窗，这个弹窗是固定定位的，会相对于viewport，当然你需要添加top:0;left:0;width:100%;height:100%;这将填满屏幕，但这样做存在潜在问题。是因为使用了全屏大弹窗，实际的路由页面并没有变化。当用户点击浏览器的后退按钮时，会回到“之前的路由界面”，当然不影响使用。但是，还有一个问题就是我们会在一个满屏的大弹窗中继续写代码，所有的代码都会耦合在一个.vue文件中，不方便代码维护。这里可以采取方法二方法二路由视图层全屏代码截图效果截图总结如果产品经理需要全屏效果，可以使用以上两种方法。只需打开固定定位布局即可。但是方法2，还是用view层来填满屏幕比较好。首选方法2。
