使用导航菜单如何实现在多个页面下左边导航菜单右边内容的效果

本文链接：https://blog.csdn.net/nanchen_J/article/details/121524212

如果你想把导航菜单设置为一个页面，并且内容也设置为一个页面，像下图这种

可以参考一下官网给出的标签

用于布局的容器组件，方便快速搭建页面的基本结构：

<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去掉的话就会有空隙