如果你想把导航菜单设置为一个页面，并且内容也设置为一个页面，像下图这种
可以参考一下官网给出的标签
用于布局的容器组件，方便快速搭建页面的基本结构：
<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。
<el-main>：主要区域容器。
<el-footer>：底栏容器。
没发直接将一个div分在两个页面中给其设置长度
直接写的话他会把菜单部分成一个block元素宽度是100%，导致后面的user页面会另起一行显示，这就特别影响页面效果
所以要将菜单栏页面和router-view所对应的用<el-container></el-container>包裹起来
el-main:主要区域容器。
写法如下：
Page.vue页面（也就是菜单导航页面）
// 主容器container <el-container> // el-col代表长度 <el-col :span="3"> <el-menu default-active="1" class="el-menu-vertical-demo"> <el-menu-item index="1" @click="btn1"> <i class="el-icon-menu"></i> <span slot="title">用户管理</span> </el-menu-item> <el-menu-item index="2" @click="btn2"> <i class="el-icon-setting"></i> <span slot="title">商品管理</span> </el-menu-item> </el-menu> </el-col> // 内容容器main <el-main> <router-view></router-view> </el-main> </el-container>
el-main中有默认值，不把padding去掉的话就会有空隙
不想要间距的话直接padding:0即可
当然你也可以只写一个container或者main也是可以实现的，最好还是两个都写上
