vue中的router-view视图层全屏幕效果（用于整屏展示内容）

问题描述

我们做项目中，最常用的布局方式就是左边导航区域，右边视图层动态变化区域（有时会来一个顶栏，放面包屑和用户头像部分）。当用户点击左边的导航区域，对应右边的视图区域会动态切换。但是好像无形中会给我们造成一个错觉，就是视图区域层并不是全屏幕，好像视图就是全屏幕去掉左侧导航栏和顶部面包屑用户头像部分的，剩余部分。如下图所示：

但是，如果遇到大场景，需要满屏展示内容，好像我们只能做一个折叠效果，给顶栏加一个图标按钮，点击图标按钮，折叠左侧的导航栏。的确这样做空间又会大一些，但是产品经理就是想要满屏的效果。怎么办？

实现方式

方式一 满屏弹窗（障眼法）

在对应需要展示的路由页面，再加一个大的弹窗，这个弹窗固定定位，就会相对于视口了，当然需要加上top:0;left:0;width:100%;height:100%;这样的话就会满屏了，但是这样做存在潜在的问题。就是因为是用一个大的满屏弹窗，实际路由页面并没有变化，当用户点击浏览器的回退按钮，就会回退到"上上个路由界面"，当然也并不影响使用。不过还有一个问题就是我们会在满屏幕的大弹窗中去接着写代码，就会让代码全部都耦合在一个.vue文件中，不方便代码的维护。这里可以采取方式二

方式二 路由视图层满屏

代码截图

效果截图

总结

如果产品经理要求使用满屏效果，上述两种方式均可以使用。就是开启固定定位布局即可。但是方式二，通过视图层满屏会更好些

优先推荐方式二